<template>
  <div class="report-bg">
    <!-- 导出按钮 -->
    <div class="export-btn-container">
      <el-button type="primary" @click="exportPDF">导出PDF</el-button>
      <el-button type="success" @click="exportWord">导出Word</el-button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-spinner type="primary" />
      <div class="loading-text">报告加载中...</div>
    </div>

    <div v-else class="report-container" ref="pdfContent">
      <!-- 主报告内容 -->
      <div>
        <!-- 第一页内容 -->
        <div class="report-page">
          <!-- 标题栏 -->
          <div class="report-title">{{ reportTitle }}</div>

          <!-- 报告解读提示 -->
          <div class="section-card">
            <div class="section-header blue-bg">一、报告解读提示</div>
            <ul class="section-list">
              <li>① 心理健康测评结果应严格保密。</li>
              <li>② 心理健康测评结果仅供参考，不能作为心理健康诊断依据。</li>
            </ul>
          </div>

          <!-- 测查基本情况 -->
          <div class="section-card">
            <div class="section-header blue-bg">二、测查基本情况</div>
            <div class="section-subtitle">1. 参与心理普查的学生情况</div>
            <el-table
              :data="studentTable"
              border
              style="width: 100%; margin-bottom: 20px"
            >
              <el-table-column prop="name" label="年级" align="center" />
              <el-table-column label="男生人数" align="center">
                <template slot-scope="scope">{{ scope.row.man }}</template>
              </el-table-column>
              <el-table-column label="女生人数" align="center">
                <template slot-scope="scope">{{ scope.row.woman }}</template>
              </el-table-column>
              <el-table-column label="总人数" align="center">
                <template slot-scope="scope">{{ scope.row.count }}</template>
              </el-table-column>
            </el-table>

            <div class="section-subtitle">2. 学生心理健康等级说明</div>
            <div class="section-desc">
              基于文献基础与专家共识，将9个与心理健康关联较强的心理指标纳入中小学生心理健康状况的综合定级体系中，通过综合评估各症状的表现来判断个体当前的心理健康状况。主要包括学生的自伤自杀意念、抑郁、焦虑情、睡眠问题、躯体化症状、手机成瘾等6种负性指标的情况，以及幸福感、心理弹性与自尊等3个积极指标的情况。通过综合评估，学生的心理状况主要分为心理健康良好，一级预警、二级预警和三级预警等四个等级。
            </div>

            <!-- 心理健康等级状态条 -->
            <div class="health-status-bar">
              <div class="status-segment good">
                <span>心理健康良好</span>
              </div>
              <div class="status-segment warning-1">
                <span>一级预警</span>
              </div>
              <div class="status-segment warning-2">
                <span>二级预警</span>
              </div>
              <div class="status-segment warning-3">
                <span>三级预警</span>
              </div>
            </div>

            <!-- 心理健康等级卡片 -->
            <div class="health-level-cards">
              <div class="health-card good">
                <div class="card-header">
                  <div class="card-title">心理健康良好</div>
                </div>
                <div class="card-content">
                  <div class="level-section">
                    <div class="section-title">分级说明：</div>
                    <div class="section-content">
                      学生总体呈现良好的心理健康状况。在情感方面，学生通常没有表现出抑郁或焦虑的明显迹象，也不存在失眠和躯体化的问题，没有出现网络成瘾问题。此外，他们的幸福感、心理弹性和自尊水平水平较高，使得他们能够更灵活地应对各种挑战，有效管理各种情感波动。从而更好地适应多变的环境。整体上，学生在学业和社交方面展现出色。在学业上，他们可能表现出高度的学习动力和自律，取得较好的成绩。社交方面，他们可能是班级中的积极分子，与同学相处友好，建立了积极健康的人际关系网络。这种良好的心理状态为他们的全面发展提供了坚实的基础。
                    </div>
                  </div>
                  <div class="level-section">
                    <div class="section-title">干预层面与干预措施：</div>
                    <div class="section-content">
                      日常预防。对于这一类学生，学校、老师、家长等方面做好日常防护工作即可。建议开展家校社合作，做好心理健康日常维护工作，经常性开展心理健康测评与动态监测，开设心理健康教育课程，组织普适性的心理健康游戏或活动。
                    </div>
                  </div>
                </div>
              </div>

              <div class="health-card warning-1">
                <div class="card-header">
                  <div class="card-title">一级预警</div>
                </div>
                <div class="card-content">
                  <div class="level-section">
                    <div class="section-title">分级说明：</div>
                    <div class="section-content">
                      学生总体呈现轻度的心理问题。情绪情感层面，学生可能表现出持续的焦虑、抑郁情绪，还可能存在一定程度的焦虑、躯体化、手机成瘾和睡眠问题，影响其正常生活和学习。学生可能偶尔存在轻微的自伤行为和自杀意念。在社交方面，可能与部分同学和家人的关系变得更加疏离，因为其有时难以控制情绪，容易发脾气。此外，他可能觉得周围人难以理解自己，对自己能力和价值的评价较低。目前这些问题带来的困扰程度属于中等，需要进一步评估。
                    </div>
                  </div>
                  <div class="level-section">
                    <div class="section-title">干预层面与干预措施：</div>
                    <div class="section-content">
                      班级重点关注。这一类学生属于一级预警群体，需要得到班级层面的重点关注。在心理教师的指导下，由班主任负责进一步研判。告知家长引起重视，引导家长对子女的积极关注与支持，及时化解子女的心理问题。班主任首先判断学生的情况是否超出了自己的能力范围。如果是，则上报给心理教师，由心理教师开展个别咨询或团体辅导，必要时转介专业机构治疗；如果否，则由班主任对学生进行恰当的心理疏导和关心帮扶。
                    </div>
                  </div>
                </div>
              </div>

              <div class="health-card warning-2">
                <div class="card-header">
                  <div class="card-title">二级预警</div>
                </div>
                <div class="card-content">
                  <div class="level-section">
                    <div class="section-title">分级说明：</div>
                    <div class="section-content">
                      学生总体呈现出较严重的心理问题。在情感方面，学生可能感受到沉重的情感负担，对生活失去兴趣，对未来失去信心，对将要发生的事情表现出过度担忧和紧张，影响的了他的睡眠，甚至出现自伤行为或自杀意念。在日常生活中，学生可能存在躯体化和手机成瘾问题。在人际关系方面，学生可能难以控制情绪，容易暴躁。这可能是由于学生对他人的不信任、对自身的评价较低以及缺乏调节自身情绪的能力。整体来说，学生目前许多生活功能受到严重损害，陷入了深度的心理困境，面临着多方面的极大挑战。
                    </div>
                  </div>
                  <div class="level-section">
                    <div class="section-title">干预层面与干预措施：</div>
                    <div class="section-content">
                      校级特别关注。这一类学生属于二级预警群体，需要得到校级层面的特别关注。心理教师直接负责，并告知家长引起重视，引导家长对子女的积极关注与支持，及时化解子女的心理问题。心理教师判断学生的情况是否超出了心理咨询或自身能力的范围。如果是，则联系校外的专业机构进行转介；如果否，则由心理教师对学生开展系统的心理咨询工作。
                    </div>
                  </div>
                </div>
              </div>

              <div class="health-card warning-3">
                <div class="card-header">
                  <div class="card-title">三级预警</div>
                </div>
                <div class="card-content">
                  <div class="level-section">
                    <div class="section-title">分级说明：</div>
                    <div class="section-content">
                      总体呈现出严重的心理危机问题。学生在情绪情感、生理状况、人际关系等诸多方面表现极差，焦虑、抑郁风险高，存在频繁的自伤行为和自杀想法，自杀风险较高，其学习与生活受到严重影响。
                    </div>
                  </div>
                  <div class="level-section">
                    <div class="section-title">干预层面与干预措施：</div>
                    <div class="section-content">
                      校级紧急关注。这一类学生属于三级预警群体，需要得到校级层面的紧急关注。激活以校领导、德育干部、心理教师和班主任等为主的危机干预小组，启动紧急心理援助方案，与学生家长积极沟通并相互配合，及时获取校外的专业机构的专业支持，对学生进行进一步的诊断和必要转介。
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- 第七页内容：学生心理健康测评结果 -->
        <div class="report-page">
          <div class="section-card">
            <div class="section-header blue-bg">三、学生心理健康测评结果</div>
            <div class="section-subtitle">1. 心理健康整体情况</div>
            
            <!-- 心理健康统计数据 -->
            <div class="health-stats-description">
              <div class="stats-title">本次测查中：</div>
              <div class="stats-items-container">
                <div class="stats-item-line good">
                  <span class="stats-dot"></span>
                  <span class="stats-text">心理健康良好的学生人数 {{ healthStats['心理健康良好'].count }} 人，占比 {{ healthStats['心理健康良好'].percentage }}%</span>
                </div>
                <div class="stats-item-line warning-1">
                  <span class="stats-dot"></span>
                  <span class="stats-text">一级预警的学生人数 {{ healthStats['1级预警'].count }} 人，占比 {{ healthStats['1级预警'].percentage }}%</span>
                </div>
                <div class="stats-item-line warning-2">
                  <span class="stats-dot"></span>
                  <span class="stats-text">二级预警的学生人数 {{ healthStats['2级预警'].count }} 人，占比 {{ healthStats['2级预警'].percentage }}%</span>
                </div>
                <div class="stats-item-line warning-3">
                  <span class="stats-dot"></span>
                  <span class="stats-text">三级预警的学生人数 {{ healthStats['3级预警'].count }} 人，占比 {{ healthStats['3级预警'].percentage }}%</span>
                </div>
              </div>
            </div>

            <!-- 心理健康整体情况表格和图表 -->
            <div class="health-overview">
              <div class="overview-left">
                <div class="overview-title blue-bg">心理健康整体情况</div>
                <el-table
                  :data="healthOverviewTableData"
                  border
                  style="width: 100%"
                  class="health-table"
                >
                  <el-table-column prop="category" label="分类" align="center"/>
                  <el-table-column prop="count" label="人数" align="center"/>
                  <el-table-column prop="percentage" label="百分比" align="center"/>
                </el-table>
              </div>
              
              <div class="overview-right">
                <div class="overview-title blue-bg">心理健康整体情况</div>
                <div class="chart-container">
                  <div id="healthPieChart" style="width: 100%; height: 240px"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 躯体心理健康问题检出情况 -->
        <div class="report-page">
          <div class="section-card">
            <div class="section-subtitle">2. 躯体心理健康问题检出情况</div>
            
            <!-- 躯体问题测评说明 -->
            <div class="somatic-description">
              <div class="description-text">
                <strong>本次测评中，全年级的心理健康问题检出情况如下图所示</strong>
              </div>
              <div class="description-note">
                (检出率按百分比从高到低排序，显示各心理健康指标的检出比例)
              </div>
            </div>
            
            <!-- 躯体问题检出情况图表 -->
            <div class="somatic-chart-section">
              <div class="somatic-chart-container">
                <div class="chart-title blue-bg">心理健康问题检出情况</div>
                <div class="chart-content">
                  <div id="somaticProblemsBarChart" style="width: 100%; height: 280px"></div>
                </div>
              </div>
            </div>
            
            <!-- 不同年级心理健康问题检出情况 -->
            <div class="grade-chart-section">
              <div class="grade-chart-container">
                <div class="chart-title blue-bg">不同年级心理健康问题检出情况</div>
                <div class="chart-content">
                  <div id="gradeDistributionChart" style="width: 100%; height: 280px"></div>
                </div>
              </div>
            </div>
            
            <!-- 问题分析说明 -->
            <div class="problem-analysis-section">
              <div class="analysis-text">
                <div v-html="gradeAnalysisText"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预警人员名单 -->
        <div class="report-page">
          <div class="section-card">
            <div class="section-header blue-bg">四、预警人员名单</div>
            <div class="section-content">
              <el-table 
                :data="reportData && reportData.assessWarnList ? reportData.assessWarnList : []" 
                border 
                style="width: 100%"
              >
                <el-table-column prop="school" label="学校" align="center" />
                <el-table-column prop="nickName" label="姓名" align="center" />
                <el-table-column prop="sex" label="性别" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="grade" label="年级" align="center" />
                <el-table-column prop="classz" label="班级" align="center" />
                <el-table-column prop="remark" label="预警等级" align="center" />
              </el-table>
              
              <div v-if="!reportData || !reportData.assessWarnList || reportData.assessWarnList.length === 0" class="no-data">
                <p>暂无预警人员数据</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 心理健康程度描述报告 -->
        <div class="report-page">
          <div class="section-card">
            <div class="section-header blue-bg">五、附-心理健康程度描述报告</div>
            
            <!-- 循环显示每个心理健康指标 -->
            <div v-if="reportData && reportData.assessSpecificList" class="specific-problems">
              <div v-for="(problem, index) in reportData.assessSpecificList" :key="problem.name" class="problem-item">
                <div class="problem-title">{{ index + 1 }}. {{ problem.name }}</div>
                
                <!-- 问题定义 -->
                <div class="problem-definition">
                  {{ problem.definition }}
                </div>
                
                <!-- 问题等级表格 -->
                <div class="problem-levels">
                  <table class="level-table">
                    <thead>
                      <tr>
                        <th v-for="level in problem.level" :key="level.name" :class="getLevelHeaderClass(level.level)">{{ level.name }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td v-for="level in problem.level" :key="level.name" :class="getLevelCellClass(level.level)">
                          {{ level.detail }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                
                <!-- 问题统计图表 -->
                <div class="problem-chart-container">
                  <div class="summary-title">{{ index + 1 }}.1 {{ problem.name }}的整体情况</div>
                  <div class="statistics-chart">
                    <div :id="'problemPieChart' + index" style="width: 100%; height: 350px; min-height: 350px;"></div>
                  </div>
                </div>
                
                <!-- 问题总结 -->
                <div class="problem-summary">
                  <div class="summary-title">{{ index + 1 }}.2 总结</div>
                  <div class="summary-content">
                    <p v-html="problem.summary"></p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 无数据提示 -->
            <div v-else class="no-data">
              <p>暂无心理健康程度描述数据</p>
            </div>
          </div>
        </div>

         <!-- 建议措施 -->
        <div class="report-page">
          <div class="section-card">
            <div class="section-header blue-bg">六、建议</div>
            <div class="section-content">
              <p>
                本次测评中，学生表现出不同水平的心理问题与心理危机，针对具有不同等级心理问题的学生，学校可参考本报告第二部分中建议的各级干预措施采取行动。
              </p>
              <p>
                此外，为了促进学校未来的心理健康教育工作的有效开展，结合本次测查结果以及教育部等十七部门关于印发《全面加强和改进新时代学生心理健康工作专项行动计划（2023—2025 年）》的通知。从学校、心理老师、班主任、家长四个方面提出以下建议：
              </p>
              <div class="suggestion-section">
                <div class="suggestion-header">1. 学校方面的建议</div>
                <div class="suggestion-content">
                  <p>针对心理健康问题，学校应建立完善的心理健康教育体系。结合本次测评结果，为心理健康问题学生提供精准化服务，对心理健康问题学生加强关注。对于存在不同程度心理健康问题的学生，学校应给予充分的关注，建议在工作中加强心理健康教育工作力度。</p>
                  
                  <div class="sub-section">
                    <div class="sub-title">(1) 以预防性和发展性教育工作为主，做好面向全体学生的普及性心理健康教育工作</div>
                    <p>加强心理健康教育。学校要充分发挥心理健康教育课程专门化教育途径的作用，保证心理健康教育课程足量。按照不同学段学生的年龄特点，科学、合理安排心理健康教育的内容。主要内容包括：普及心理健康知识，树立心理健康意识，了解心理调节方法，认识心理异常现象，掌握心理保健常识和技能。其重点是认识自我、学会学习、人际交往、情绪调适、升学择业以及生活和社会适应等方面的内容。统筹协调，抓实校本级的心理健康教育活动。由学校心理健康教育主管领导牵头，心理健康教育专任教师负责，班主任主力协同，开展形式多样、学生喜闻乐见的心理健康教育活动，如定期开展心理健康教育活动周、心理健康教育活动月、心理专家进校园等。</p>
                  </div>
                  
                  <div class="sub-section">
                    <div class="sub-title">(2) 做好学生心理健康测评，客观、量化地评估学生心理健康状况，建立学生心理档案</div>
                    <p>学校要定期开展心理测评，客观、量化地对学生心理状况进行摸查，为学校的心理健康工作提供依据。心理测评工作一般每学年进行一次（建议安排在每学年秋季开学初进行），心理测评对象主要为小学四年级以上学生。无论进行何种心理测评，测评前学校都要做好家长的知情同意工作。测评结果要注意保密，避免因测评造成对学生的歧视、偏见、标签化等不良影响。</p>
                  </div>
                  
                  <div class="sub-section">
                    <div class="sub-title">(3) 建立"一生一策"的心理档案制度，完善学校心理危机预警机制</div>
                    <p>学校将前期家访、日常观察、心理测评的结果整合后，应形成对每个学生心理状况的科学化、系统化描述，即学生心理档案。学生心理档案的内容应根据各学校的教育特色和教育需求灵活设计，但一般应包括学生基本信息、家庭教育信息、近期重大社会事件、心理测评结果等基本内容。通过日常观察与心理测评将不同心理健康水平的学生进行初步分级，并及时采取相应的干预措施，分级响应，高效应对，努力提高学校日常管理的工作效率和质量。多渠道监测严重心理危机学生，及时实施针对性干预。建立一个纵向危机应对联动机制，确保在第一时间及时响应，畅通预防转介干预就医通道，及时转介、诊断、治疗。对于心理危机学生，须长期动态关注，建立心理危机干预善后机制。</p>
                  </div>
                  
                  <div class="sub-section">
                    <div class="sub-title">(4) 加强家校协同育人</div>
                    <p>学校要建立与家长定期沟通机制，及时共享学生的家校表现与成长信息，特别引导家长不能只关心学生在校和在家的学习情况，更要重点关注学生的各方面表现是否符合其相应的心理年龄特征。学校应充分利用家长会、家长学校、学校网站、微信公众号、家庭教育手册等多种形式，开展面对家长的心理健康科普宣教，提升广大家长的心理健康教育理念和意识，引导家长关注孩子的心理健康，树立科学的养育观念，尊重孩子的心理发展规律，为孩子成长提供良好的家庭环境。</p>
                  </div>
                </div>
              </div>

              <div class="suggestion-section">
                <div class="suggestion-header">2. 心理老师方面的建议</div>
                <div class="suggestion-content">
                  <p>心理老师应通过自我学习、参加培训等方式不断提升自身的教学能力、心理咨询与辅导能力、研究能力等专业能力。不断丰富心理辅导室的服务形式，个别辅导和咨询是心理辅导室最常见的工作形式，团体或小组辅导也是比较常用的形式，另外，推进同伴互助、朋辈辅导对于心理健康服务体系建设具有重要的意义。变被动咨询为主动咨询，一方面需要能够提供专业的服务，另一方面还要不断地提高学生的心理健康意识，使学生愿意主动地使用心理辅导室的服务。日常工作中做好与班主任、德育老师、学生家长等方面的沟通和联系。</p>
                </div>
              </div>

              <div class="suggestion-section">
                <div class="suggestion-header">3. 班主任方面的建议</div>
                <div class="suggestion-content">
                  <p>班主任须掌握中小学心理健康教育的理论和方法，并能够运用到日常学生教育教学中去，并重视师生关系、同学关系、学习成长和班级文化等良好班级环境建设。根据班本需要，主持心理健康教育活动形式的班会课。着力培育合作、互助、互信、互爱的集体氛围，强调朋辈辅导，共同进步。重视与家长的沟通，在家长会或日常与家长的联系中有意识地指导家长关注子女的心理成长。</p>
                </div>
              </div>

              <div class="suggestion-section">
                <div class="suggestion-header">4. 家长方面的建议</div>
                <div class="suggestion-content">
                  <p>家长应树立心理健康的观念，意识孩子心理健康的重要性；加强自我训练，充分利用社会教育资源，学习家庭心理健康教育知识和方法；营造良好和谐的家庭氛围，这是学生心理健康成长的必要条件；加强亲子沟通，了解并及时发现孩子的心理健康问题；推进家校共育，加强子女的教育投入，与学校建立有效沟通，积极参与家校合作活动。</p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import html2pdf from "html2pdf.js";
import * as echarts from "echarts";
// 假设已创建的API服务
import { getReportOverview } from "@/api/system/report";

export default {
  data() {
    return {
      reportData: null,
      studentTable: [],
      levelTable: [],
      charts: [],
      loading: false,
      currentHealthLevel: null,
      problemTypes: [],
      healthOverviewTableData: [],
      somaticProblemsTableData: []
    };
  },
  computed: {
    reportTitle() {
      // 如果有学校信息则显示
      let schoolName = "学校";
      if (
        this.reportData &&
        this.reportData.assessWarnList &&
        this.reportData.assessWarnList.length > 0
      ) {
        schoolName = this.reportData.assessWarnList[0].school || "学校";
      }

      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      return `${schoolName}学生心理健康测评报告（${year}年${month}月）`;
    },
    // 获取URL参数
    queryParams() {
      return {
        userId: this.$route.query.userId,
        deptId: this.$route.query.deptId,
        taskId: this.$route.query.taskId,
        download: this.$route.query.download === "true",
      };
    },
    // 动态生成年级分析文字
    gradeAnalysisText() {
      if (!this.reportData || !this.reportData.assessDistributionOrderDesc) {
        return '<p><strong>暂无数据</strong></p>';
      }
      
      const gradeData = this.reportData.assessDistributionOrderDesc;
      let analysisText = '';
      
      gradeData.forEach((grade, index) => {
        if (grade.data && Array.isArray(grade.data)) {
          // 按百分比排序（从高到低），显示所有项目（包括0值）
          const sortedProblems = grade.data
            .sort((a, b) => {
              const aPercent = parseFloat(a.percentage.replace('%', ''));
              const bPercent = parseFloat(b.percentage.replace('%', ''));
              return bPercent - aPercent; // 从高到低
            });
          
          if (sortedProblems.length > 0) {
            // 为每个问题类型分配颜色，不显示百分比
            const problemList = sortedProblems.map((item, idx) => {
              const color = this.getProblemTypeColor(item.name, idx);
              // 只显示问题名称，不显示百分比
              return `<span style="color: ${color}; font-weight: bold;">${item.name}</span>`;
            }).join('、');
            
            analysisText += `<p><strong>${grade.name}心理健康问题检出情况：</strong>${problemList}。</p>`;
          } else {
            analysisText += `<p><strong>${grade.name}心理健康问题检出情况：</strong>未检出明显问题。</p>`;
          }
        } else {
          analysisText += `<p><strong>${grade.name}心理健康问题检出情况：</strong>暂无数据。</p>`;
        }
      });
      
      return analysisText;
    },
    // 健康统计数据
    healthStats() {
      if (!this.reportData || !this.reportData.assessPipChart) {
        return {
          '心理健康良好': { count: 0, percentage: 0 },
          '1级预警': { count: 0, percentage: 0 },
          '2级预警': { count: 0, percentage: 0 },
          '3级预警': { count: 0, percentage: 0 }
        };
      }
      
      // 映射名称
      const nameMapping = {
        '心理健康良好': '心理健康良好',
        '1级预警': '1级预警',
        '2级预警': '2级预警',
        '3级预警': '3级预警'
      };
      
      // 计算总人数
      const total = this.reportData.assessPipChart.reduce((sum, item) => sum + item.value, 0);
      
      const stats = {};
      Object.keys(nameMapping).forEach(category => {
        const targetName = nameMapping[category];
        const item = this.reportData.assessPipChart.find(item => item.data === targetName);
        const count = item ? item.value : 0;
        const percentage = total > 0 ? Math.round((count / total) * 100) : 0;
        
        stats[category] = { count, percentage };
      });
      
      return stats;
    },
  },
  created() {
    this.getReportData();
  },
  mounted() {
    // 当数据加载完成后初始化图表
    this.$watch("reportData", (newVal) => {
      if (newVal) {
        this.$nextTick(() => {
          this.initPieChart();
          this.initBarChart();
          this.initHealthPieChart();
          this.initSomaticProblemsBarChart();
          this.initGradeDistributionChart();
          this.initSomatizationPieChart();
          
          // 初始化动态心理问题图表
          if (newVal.assessSpecificList && Array.isArray(newVal.assessSpecificList)) {
            setTimeout(() => {
              newVal.assessSpecificList.forEach((_, index) => {
                this.initProblemPieChart(index);
              });
            }, 500); // 给DOM渲染留出时间
          }

          // 如果是下载模式，自动触发PDF导出
          if (this.queryParams.download) {
            setTimeout(() => {
              this.exportPDF();
            }, 2000); // 给图表加载留出一些时间
          }
        });
      }
    });
  },
  methods: {
    exportPDF() {
      const element = this.$refs.pdfContent;
      const opt = {
        margin: 10,
        filename: "心理健康测评报告.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { scale: 2, useCORS: true },
        jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
      };

      html2pdf().set(opt).from(element).save();
    },

    // 获取所有图表的Base64图片
    async getChartsAsImages() {
      const chartImages = {};
      
      // 确保所有图表都已重新渲染完成
      await this.$nextTick();
      
      // 重新初始化所有图表以确保数据一致性
      console.log('重新初始化图表以确保导出数据一致性');
      this.initHealthPieChart();
      
      // 重新初始化问题图表
      if (this.reportData && this.reportData.assessSpecificList) {
        this.reportData.assessSpecificList.forEach((_, index) => {
          this.initProblemPieChart(index);
        });
      }
      
      // 等待图表渲染完成
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 获取所有图表实例
      const chartConfigs = [
        { id: 'pieChart', name: 'pieChart' },
        { id: 'healthPieChart', name: 'healthPieChart' },
        { id: 'somaticProblemsBarChart', name: 'somaticProblemsBarChart' },
        { id: 'gradeDistributionChart', name: 'gradeDistributionChart' },
        { id: 'somatizationPieChart', name: 'somatizationPieChart' }
      ];
      
      // 添加动态生成的问题图表
      if (this.reportData && this.reportData.assessSpecificList) {
        this.reportData.assessSpecificList.forEach((problem, index) => {
          chartConfigs.push({
            id: `problemPieChart${index}`,
            name: `problemPieChart${index}`,
            problemName: problem.name
          });
        });
      }
      
      console.log('开始获取图表图片，图表配置:', chartConfigs);
      console.log('当前所有图表实例:', this.charts.map(chart => ({ 
        id: chart.getDom()?.id, 
        problemIndex: chart.__problemIndex,
        isDisposed: chart.isDisposed()
      })));
      
      for (const config of chartConfigs) {
        try {
          const chartDom = document.getElementById(config.id);
          console.log(`查找图表DOM ${config.id}:`, chartDom ? '找到' : '未找到', config.problemName ? `(${config.problemName})` : '');
          
          if (chartDom) {
            const chartInstance = echarts.getInstanceByDom(chartDom);
            console.log(`获取图表实例 ${config.id}:`, chartInstance ? '成功' : '失败');
            
            if (chartInstance) {
              // 特别处理healthPieChart
              if (config.id === 'healthPieChart') {
                console.log('healthPieChart图表实例详情:', {
                  isDisposed: chartInstance.isDisposed(),
                  getDom: chartInstance.getDom(),
                  getOption: chartInstance.getOption()
                });
              }
              
              // 特别处理问题图表
              if (config.name.startsWith('problemPieChart')) {
                const problemIndex = parseInt(config.name.replace('problemPieChart', ''));
                const currentOption = chartInstance.getOption();
                console.log(`问题图表 ${problemIndex} (${config.problemName}) 实例详情:`, {
                  isDisposed: chartInstance.isDisposed(),
                  getDom: chartInstance.getDom(),
                  hasOption: !!currentOption,
                  seriesData: currentOption?.series?.[0]?.data
                });
              }
              
              // 将图表转换为Base64图片
               const base64 = chartInstance.getDataURL({
                 type: 'png',
                 pixelRatio: 1,
                 backgroundColor: '#fff',
                 width: 500,
                 height: 350
               });
              chartImages[config.name] = base64;
              console.log(`图表 ${config.id} 转换成功，Base64长度:`, base64.length);
            } else {
              console.warn(`图表 ${config.id} 实例不存在`);
              // 特别检查healthPieChart
              if (config.id === 'healthPieChart') {
                console.warn('healthPieChart实例不存在，检查DOM状态:', {
                  domExists: !!chartDom,
                  domId: chartDom?.id,
                  domClass: chartDom?.className,
                  domStyle: chartDom?.style.cssText
                });
              }
              
              // 特别检查问题图表
              if (config.name.startsWith('problemPieChart')) {
                const problemIndex = parseInt(config.name.replace('problemPieChart', ''));
                console.warn(`问题图表 ${problemIndex} (${config.problemName}) 实例不存在，检查DOM状态:`, {
                  domExists: !!chartDom,
                  domId: chartDom?.id,
                  domClass: chartDom?.className,
                  domStyle: chartDom?.style.cssText
                });
              }
            }
          } else {
            console.warn(`图表DOM ${config.id} 不存在`);
            if (config.problemName) {
              console.warn(`问题图表 ${config.problemName} 的DOM元素未找到`);
            }
          }
        } catch (error) {
          console.warn(`获取图表 ${config.id} 图片失败:`, error);
        }
      }
      
      console.log('最终获取的图表图片:', Object.keys(chartImages));
      
      return chartImages;
    },

    // 处理Element UI表格，转换为标准HTML表格
    processElementTables(element) {
      // 查找Element UI表格
      const elTables = element.querySelectorAll('.el-table');
      
      elTables.forEach(elTable => {
        try {
          // 判断表格类型并创建对应的原生HTML表格
          let newTable = null;
          
          // 心理健康整体情况表格
          if (elTable.classList.contains('health-table')) {
            newTable = this.createHealthOverviewTable();
          }
          // 预警人员名单表格
          else if (elTable.closest('.section-content') && 
                   elTable.closest('.section-card') && 
                   elTable.closest('.section-card').querySelector('.section-header') &&
                   elTable.closest('.section-card').querySelector('.section-header').textContent.includes('四、预警人员名单')) {
            newTable = this.createWarningListTable();
          }
          // 学生情况表格
          else {
            newTable = this.createStudentTable();
          }
          
          // 替换Element UI表格
          if (newTable) {
            elTable.parentNode.replaceChild(newTable, elTable);
          }
          
        } catch (error) {
          console.warn('处理表格时出错:', error);
        }
      });
    },
    
    // 创建学生情况表格
    createStudentTable() {
      const table = document.createElement('table');
      table.style.cssText = `
        width: 100% !important;
        border-collapse: collapse !important;
        border: 2px solid #333 !important;
        margin: 15px 0 !important;
        background-color: white !important;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
      `;
      
      // 创建表头
      const thead = document.createElement('thead');
      const headerRow = document.createElement('tr');
      
      const headers = ['年级', '男生人数', '女生人数', '总人数'];
      headers.forEach(headerText => {
        const th = document.createElement('th');
        th.textContent = headerText;
        th.style.cssText = `
          border: 2px solid #333 !important;
          padding: 8px 10px !important;
          background-color: #e6e6e6 !important;
          font-weight: bold !important;
          text-align: center !important;
          font-size: 13px !important;
          color: #333 !important;
        `;
        headerRow.appendChild(th);
      });
      
      thead.appendChild(headerRow);
      table.appendChild(thead);
      
      // 创建表体
      const tbody = document.createElement('tbody');
      
      if (this.studentTable && this.studentTable.length > 0) {
        this.studentTable.forEach(row => {
          const tr = document.createElement('tr');
          
          // 年级
          const td1 = document.createElement('td');
          td1.textContent = row.name || '';
          td1.style.cssText = this.getTableCellStyle();
          tr.appendChild(td1);
          
          // 男生人数
          const td2 = document.createElement('td');
          td2.textContent = row.man || '0';
          td2.style.cssText = this.getTableCellStyle();
          tr.appendChild(td2);
          
          // 女生人数
          const td3 = document.createElement('td');
          td3.textContent = row.woman || '0';
          td3.style.cssText = this.getTableCellStyle();
          tr.appendChild(td3);
          
          // 总人数
          const td4 = document.createElement('td');
          td4.textContent = row.count || '0';
          td4.style.cssText = this.getTableCellStyle();
          tr.appendChild(td4);
          
          tbody.appendChild(tr);
        });
      }
      
      table.appendChild(tbody);
      return table;
    },
    
    // 创建心理健康整体情况表格
    createHealthOverviewTable() {
      const table = document.createElement('table');
      table.style.cssText = `
        width: 100% !important;
        border-collapse: collapse !important;
        border: 2px solid #333 !important;
        margin: 15px 0 !important;
        background-color: white !important;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
      `;
      
      // 创建表头
      const thead = document.createElement('thead');
      const headerRow = document.createElement('tr');
      
      const headers = ['分类', '人数', '百分比'];
      headers.forEach(headerText => {
        const th = document.createElement('th');
        th.textContent = headerText;
        th.style.cssText = `
          border: 2px solid #333 !important;
          padding: 8px 10px !important;
          background-color: #e6e6e6 !important;
          font-weight: bold !important;
          text-align: center !important;
          font-size: 13px !important;
          color: #333 !important;
        `;
        headerRow.appendChild(th);
      });
      
      thead.appendChild(headerRow);
      table.appendChild(thead);
      
      // 创建表体
      const tbody = document.createElement('tbody');
      
      if (this.healthOverviewTableData && this.healthOverviewTableData.length > 0) {
        this.healthOverviewTableData.forEach(row => {
          const tr = document.createElement('tr');
          
          // 分类
          const td1 = document.createElement('td');
          td1.textContent = row.category || '';
          td1.style.cssText = this.getTableCellStyle();
          tr.appendChild(td1);
          
          // 人数
          const td2 = document.createElement('td');
          td2.textContent = row.count || '0';
          td2.style.cssText = this.getTableCellStyle();
          tr.appendChild(td2);
          
          // 百分比
          const td3 = document.createElement('td');
          td3.textContent = row.percentage || '0%';
          td3.style.cssText = this.getTableCellStyle();
          tr.appendChild(td3);
          
          tbody.appendChild(tr);
        });
      }
      
      table.appendChild(tbody);
      return table;
    },
    
    // 创建预警人员名单表格
    createWarningListTable() {
      const table = document.createElement('table');
      table.style.cssText = `
        width: 100% !important;
        border-collapse: collapse !important;
        border: 2px solid #333 !important;
        margin: 15px 0 !important;
        background-color: white !important;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
      `;
      
      // 创建表头
      const thead = document.createElement('thead');
      const headerRow = document.createElement('tr');
      
      const headers = ['学校', '姓名', '性别', '年级', '班级', '预警等级'];
      headers.forEach(headerText => {
        const th = document.createElement('th');
        th.textContent = headerText;
        th.style.cssText = `
          border: 2px solid #333 !important;
          padding: 8px 10px !important;
          background-color: #e6e6e6 !important;
          font-weight: bold !important;
          text-align: center !important;
          font-size: 13px !important;
          color: #333 !important;
        `;
        headerRow.appendChild(th);
      });
      
      thead.appendChild(headerRow);
      table.appendChild(thead);
      
      // 创建表体
      const tbody = document.createElement('tbody');
      
      if (this.reportData && this.reportData.assessWarnList && this.reportData.assessWarnList.length > 0) {
        this.reportData.assessWarnList.forEach(row => {
          const tr = document.createElement('tr');
          
          // 学校
          const td1 = document.createElement('td');
          td1.textContent = row.school || '';
          td1.style.cssText = this.getTableCellStyle();
          tr.appendChild(td1);
          
          // 姓名
          const td2 = document.createElement('td');
          td2.textContent = row.nickName || '';
          td2.style.cssText = this.getTableCellStyle();
          tr.appendChild(td2);
          
          // 性别
          const td3 = document.createElement('td');
          td3.textContent = row.sex === 1 ? '男' : '女';
          td3.style.cssText = this.getTableCellStyle();
          tr.appendChild(td3);
          
          // 年级
          const td4 = document.createElement('td');
          td4.textContent = row.grade || '';
          td4.style.cssText = this.getTableCellStyle();
          tr.appendChild(td4);
          
          // 班级
          const td5 = document.createElement('td');
          td5.textContent = row.classz || '';
          td5.style.cssText = this.getTableCellStyle();
          tr.appendChild(td5);
          
          // 预警等级
          const td6 = document.createElement('td');
          td6.textContent = row.remark || '';
          td6.style.cssText = this.getTableCellStyle();
          tr.appendChild(td6);
          
          tbody.appendChild(tr);
        });
      }
      
      table.appendChild(tbody);
      return table;
    },
    
    // 获取表格单元格样式
    getTableCellStyle() {
      return `
        border: 1px solid #333 !important;
        padding: 8px 10px !important;
        text-align: center !important;
        background-color: white !important;
        font-size: 12px !important;
        color: #333 !important;
      `;
    },
    

    
    // 创建标准HTML表格
    createStandardTable(tableData, tableColumns) {
      const table = document.createElement('table');
      table.style.cssText = `
        width: 100% !important;
        border-collapse: collapse !important;
        border: 2px solid #333 !important;
        margin: 15px 0 !important;
        background-color: white !important;
        font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
      `;
      
      // 创建表头
      const thead = document.createElement('thead');
      const headerRow = document.createElement('tr');
      
      tableColumns.forEach(column => {
        const th = document.createElement('th');
        th.textContent = column.label;
        th.style.cssText = `
          border: 2px solid #333 !important;
          padding: 8px 10px !important;
          background-color: #e6e6e6 !important;
          font-weight: bold !important;
          text-align: center !important;
          font-size: 13px !important;
          color: #333 !important;
        `;
        headerRow.appendChild(th);
      });
      
      thead.appendChild(headerRow);
      table.appendChild(thead);
      
      // 创建表体
      const tbody = document.createElement('tbody');
      
      tableData.forEach(row => {
        const tr = document.createElement('tr');
        
        tableColumns.forEach(column => {
          const td = document.createElement('td');
          let cellValue = row[column.prop];
          
          // 特殊处理性别字段
          if (column.prop === 'sex' && (cellValue === 1 || cellValue === 0)) {
            cellValue = cellValue === 1 ? '男' : '女';
          } else if (cellValue === 0 || cellValue === '0') {
            cellValue = '0';
          } else if (cellValue === null || cellValue === undefined || cellValue === '') {
            cellValue = '';
          } else {
            cellValue = String(cellValue);
          }
          td.textContent = cellValue;
          td.style.cssText = `
            border: 1px solid #333 !important;
            padding: 8px 10px !important;
            text-align: center !important;
            background-color: white !important;
            font-size: 12px !important;
            color: #333 !important;
          `;
          tr.appendChild(td);
        });
        
        tbody.appendChild(tr);
      });
      
      table.appendChild(tbody);
      
      return table;
    },
    
    // 处理状态条和卡片的特殊样式
    processSpecialElements(element) {
      console.log('开始处理特殊元素...');
      
      // 处理状态条 - 转换为简单的表格结构
      const statusBars = element.querySelectorAll('.health-status-bar');
      console.log(`找到 ${statusBars.length} 个状态条`);
      statusBars.forEach((statusBar, barIndex) => {
        console.log(`处理第 ${barIndex + 1} 个状态条`);
        
        const segments = statusBar.querySelectorAll('.status-segment');
        console.log(`  状态条中找到 ${segments.length} 个片段`);
        
        // 创建表格来替代状态条
        const table = document.createElement('table');
        table.style.cssText = `
          width: 100% !important;
          border-collapse: collapse !important;
          margin: 20px 0 !important;
          table-layout: fixed !important;
          border: 2px solid #333 !important;
        `;
        
        const tr = document.createElement('tr');
        
        segments.forEach((segment, index) => {
          const segmentText = segment.textContent || segment.innerText;
          const spanElement = segment.querySelector('span');
          let finalText = '';
          
          if (spanElement) {
            finalText = spanElement.textContent || spanElement.innerText || '';
          } else {
            finalText = segmentText || '';
          }
          
          console.log(`    片段 ${index + 1} 文本: ${finalText}`);
          
          const td = document.createElement('td');
          td.textContent = finalText;
          td.style.cssText = `
            width: 25% !important;
            padding: 12px !important;
            text-align: center !important;
            font-weight: bold !important;
            font-size: 14px !important;
            border: 1px solid #333 !important;
            color: white !important;
            vertical-align: middle !important;
          `;
          
          // 根据原始类名设置背景颜色
          if (segment.classList.contains('good')) {
            td.style.backgroundColor = '#4caf50';
            td.style.color = 'white';
          } else if (segment.classList.contains('warning-1')) {
            td.style.backgroundColor = '#f44336';
            td.style.color = 'white';
          } else if (segment.classList.contains('warning-2')) {
            td.style.backgroundColor = '#ff9800';
            td.style.color = 'white';
          } else if (segment.classList.contains('warning-3')) {
            td.style.backgroundColor = '#ffc107';
            td.style.color = '#333';
          }
          
          tr.appendChild(td);
        });
        
        table.appendChild(tr);
        
        // 确保替换成功
        if (statusBar.parentNode) {
          statusBar.parentNode.replaceChild(table, statusBar);
          console.log(`状态条 ${barIndex + 1} 已成功替换为表格`);
        }
      });
      
      // 处理健康卡片标题 - 增强处理逻辑
      const healthCards = element.querySelectorAll('.health-card');
      console.log(`找到 ${healthCards.length} 个健康卡片`);
      healthCards.forEach((card, cardIndex) => {
        console.log(`处理第 ${cardIndex + 1} 个健康卡片`);
        
        // 查找所有可能的标题元素
        const cardTitles = card.querySelectorAll('.card-title, .card-header .card-title');
        cardTitles.forEach((cardTitle, titleIndex) => {
          if (cardTitle) {
            const titleText = cardTitle.textContent || cardTitle.innerText;
            console.log(`  卡片标题文本: ${titleText}`);
            
            if (titleText && titleText.trim()) {
              // 创建一个简单的段落来替代复杂的卡片标题
              const titleParagraph = document.createElement('div');
              titleParagraph.textContent = titleText.trim();
              titleParagraph.style.cssText = `
                font-size: 16px !important;
                font-weight: bold !important;
                color: white !important;
                padding: 12px 24px !important;
                margin: 10px auto !important;
                text-align: center !important;
                width: 160px !important;
                border-radius: 25px !important;
                display: block !important;
                box-sizing: border-box !important;
              `;
              
              // 根据卡片类型设置背景颜色
              if (card.classList.contains('good')) {
                titleParagraph.style.backgroundColor = '#4caf50';
                titleParagraph.style.color = 'white';
                console.log(`    设置为绿色背景（good）`);
              } else if (card.classList.contains('warning-1')) {
                titleParagraph.style.backgroundColor = '#f44336';
                titleParagraph.style.color = 'white';
                console.log(`    设置为红色背景（warning-1）`);
              } else if (card.classList.contains('warning-2')) {
                titleParagraph.style.backgroundColor = '#ff9800';
                titleParagraph.style.color = 'white';
                console.log(`    设置为橙色背景（warning-2）`);
              } else if (card.classList.contains('warning-3')) {
                titleParagraph.style.backgroundColor = '#ffc107';
                titleParagraph.style.color = '#333';
                console.log(`    设置为黄色背景（warning-3）`);
              }
              
              // 替换原始标题元素
              if (cardTitle.parentNode) {
                cardTitle.parentNode.replaceChild(titleParagraph, cardTitle);
                console.log(`卡片标题 ${titleIndex + 1} 已成功替换`);
              }
            }
          }
        });
        
        // 简化卡片样式
        card.style.cssText = `
          margin: 20px 0 !important;
          border-radius: 8px !important;
          background-color: white !important;
          padding: 0 !important;
        `;
        
        const cardHeader = card.querySelector('.card-header');
        if (cardHeader) {
          cardHeader.style.cssText = `
            padding: 15px !important;
            background-color: #f8f9fa !important;
            margin: 0 !important;
          `;
        }
        
        const cardContent = card.querySelector('.card-content');
        if (cardContent) {
          cardContent.style.cssText = `
            padding: 20px !important;
            background-color: white !important;
          `;
        }
        
        // 处理级别部分
        const levelSections = card.querySelectorAll('.level-section');
        levelSections.forEach(section => {
          section.style.cssText = `
            margin-bottom: 15px !important;
            padding: 15px !important;
            background-color: #f8f9fa !important;
            border-radius: 4px !important;
          `;
          
          const sectionTitle = section.querySelector('.section-title');
          if (sectionTitle) {
            sectionTitle.style.cssText = `
              font-weight: bold !important;
              font-size: 15px !important;
              color: #333 !important;
              margin-bottom: 10px !important;
              padding: 8px 12px !important;
              background-color: #e6e6e6 !important;
              border-radius: 3px !important;
            `;
          }
          
          const sectionContent = section.querySelector('.section-content');
          if (sectionContent) {
            sectionContent.style.cssText = `
              font-size: 14px !important;
              line-height: 1.6 !important;
              color: #666 !important;
              text-align: justify !important;
              padding: 5px !important;
            `;
          }
        });
      });
      
      console.log('特殊元素处理完成');
    },

    async exportWord() {
      try {
        this.$message({
          message: '正在生成Word，请稍候...',
          type: 'info',
          duration: 0
        });

        // 需要导出的页面区域
        const exportEl = this.$refs.pdfContent;
        if (!exportEl) {
          this.$message.closeAll();
          this.$message.error('未找到可导出的内容区域');
          return;
        }

        // 获取所有图表的Base64图片
        const chartImages = await this.getChartsAsImages();

        // 适配 Word 的基础样式，尽量还原页面视觉
        const styles = `
          body { 
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif; 
            color: #333;
            line-height: 1.6;
            margin: 20px;
          }
          h1, h2, h3 { 
            margin: 16px 0 8px 0; 
            color: #00b4f1;
            font-weight: bold;
          }
          .report-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            background: #00b4f1;
            border-radius: 0;
            margin-bottom: 30px;
            padding: 15px 0;
            page-break-after: avoid;
          }
          .section-card {
            margin-bottom: 32px;
            page-break-inside: avoid;
          }
          .section-header { 
            font-size: 18px; 
            font-weight: bold; 
            color: white;
            background-color: #00b4f1;
            padding: 12px 20px;
            margin: 20px 0 15px 0;
            text-align: center;
            page-break-after: avoid;
          }
          .section-subtitle {
            font-size: 16px;
            color: #00b4f1;
            font-weight: bold;
            margin: 15px 0 10px 0;
          }
          .section-list {
            margin: 0 0 16px 20px;
            color: #333;
            font-size: 15px;
          }
          .section-desc, .section-content {
            font-size: 14px;
            line-height: 1.8;
            margin: 10px 0;
            text-align: justify;
          }
          .section-desc {
            font-size: 15px;
            color: #333;
            margin-bottom: 18px;
          }
          table { 
            width: 100%; 
            border-collapse: collapse; 
            margin: 15px 0;
            font-size: 12px;
            table-layout: fixed;
            border: 2px solid #333;
            background-color: white;
            page-break-inside: avoid;
          }
          th, td { 
            border: 1px solid #333 !important; 
            padding: 8px 10px; 
            text-align: center;
            vertical-align: middle;
            word-wrap: break-word;
            overflow-wrap: break-word;
            background-color: white;
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
          }
          th { 
            background-color: #e6e6e6 !important;
            font-weight: bold;
            font-size: 13px;
            color: #333;
            border: 2px solid #333 !important;
          }
          td {
            font-size: 12px;
            line-height: 1.5;
            color: #333;
            border: 1px solid #333 !important;
          }
          /* 特别针对学生表格和健康表格的样式加强 */
          .health-table table,
          .el-table table {
            border: 2px solid #333 !important;
            border-collapse: collapse !important;
          }
          .health-table th,
          .health-table td,
          .el-table th,
          .el-table td {
            border: 1px solid #333 !important;
            padding: 8px !important;
            background-color: white !important;
          }
          .health-table th,
          .el-table th {
            background-color: #e6e6e6 !important;
            font-weight: bold !important;
          }
          /* 预警人员名单表格特殊样式 */
          .section-content .el-table table {
            border: 2px solid #333 !important;
            border-collapse: collapse !important;
          }
          .section-content .el-table th,
          .section-content .el-table td {
            border: 1px solid #333 !important;
            padding: 8px 10px !important;
            text-align: center !important;
            background-color: white !important;
            font-size: 12px !important;
            color: #333 !important;
          }
          .section-content .el-table th {
            background-color: #e6e6e6 !important;
            font-weight: bold !important;
            font-size: 13px !important;
            color: #333 !important;
          }
          /* 状态条的表格样式 - Word兼容 */
          .health-status-bar table {
            width: 100% !important;
            border-collapse: collapse !important;
            margin: 20px 0 !important;
            table-layout: fixed !important;
            border: 2px solid #333 !important;
            page-break-inside: avoid;
          }
          .health-status-bar td {
            width: 25% !important;
            padding: 12px !important;
            text-align: center !important;
            font-weight: bold !important;
            font-size: 14px !important;
            border: 1px solid #333 !important;
            color: white !important;
            vertical-align: middle !important;
          }
          /* 状态条原有样式保留以防兼容性问题 */
          .health-status-bar {
            display: block !important;
            width: 100% !important;
            margin: 20px 0 !important;
          }
          .status-segment {
            display: inline-block !important;
            width: 25% !important;
            height: 36px !important;
            line-height: 36px !important;
            text-align: center !important;
            color: white !important;
            font-weight: bold !important;
            font-size: 14px !important;
            vertical-align: top !important;
            border-right: 1px solid #333 !important;
          }
          .status-segment:last-child {
            border-right: none !important;
          }
          .status-segment.good { 
            background-color: #4caf50 !important; 
            color: white !important;
          }
          .status-segment.warning-1 { 
            background-color: #f44336 !important; 
            color: white !important;
          }
          .status-segment.warning-2 { 
            background-color: #ff9800 !important; 
            color: white !important;
          }
          .status-segment.warning-3 { 
            background-color: #ffc107 !important; 
            color: #333 !important;
          }
          .health-card {
            margin: 20px 0 !important;
            border-radius: 8px !important;
            background-color: white !important;
            page-break-inside: avoid !important;
            padding: 0 !important;
            border-left: 4px solid #00b4f1 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
          }
          .health-card.good {
            border-left: 4px solid #4caf50 !important;
          }
          .health-card.warning-1 {
            border-left: 4px solid #b71c1c !important;
          }
          .health-card.warning-2 {
            border-left: 4px solid #ff5722 !important;
          }
          .health-card.warning-3 {
            border-left: 4px solid #ff9800 !important;
          }
          .card-header {
            padding: 15px !important;
            background-color: #f8f9fa !important;
            margin: 0 !important;
          }
          /* 新的段落样式的卡片标题 */
          .card-header p,
          .card-header div {
            font-size: 16px !important;
            font-weight: bold !important;
            color: white !important;
            padding: 12px 24px !important;
            margin: 10px auto !important;
            text-align: center !important;
            width: 160px !important;
            border-radius: 25px !important;
            display: block !important;
            box-sizing: border-box !important;
          }
          /* 原有卡片标题样式保留以防兼容性问题 */
          .card-title {
            font-size: 16px !important;
            font-weight: bold !important;
            color: white !important;
            padding: 8px 16px !important;
            border-radius: 20px !important;
            display: inline-block !important;
            margin: 0 !important;
            text-align: center !important;
            min-width: 120px !important;
          }
          .health-card.good .card-title,
          .health-card.good .card-header p,
          .health-card.good .card-header div { 
            background-color: #4caf50 !important; 
            color: white !important;
          }
          .health-card.warning-1 .card-title,
          .health-card.warning-1 .card-header p,
          .health-card.warning-1 .card-header div { 
            background-color: #f44336 !important; 
            color: white !important;
          }
          .health-card.warning-2 .card-title,
          .health-card.warning-2 .card-header p,
          .health-card.warning-2 .card-header div { 
            background-color: #ff9800 !important; 
            color: white !important;
          }
          .health-card.warning-3 .card-title,
          .health-card.warning-3 .card-header p,
          .health-card.warning-3 .card-header div { 
            background-color: #ffc107 !important; 
            color: #333 !important;
          }
          .card-content {
            padding: 20px !important;
            background-color: #f8f9fa !important;
            border: 1px solid #e0e0e0 !important;
          }
          .level-section {
            margin-bottom: 20px !important;
            padding: 10px !important;
            background-color: white !important;
            border-radius: 4px !important;
          }
          .level-section .section-title {
            font-weight: bold !important;
            font-size: 15px !important;
            color: #333 !important;
            margin-bottom: 8px !important;
            background-color: #e6e6e6 !important;
            padding: 5px 10px !important;
            border-radius: 3px !important;
          }
          .level-section .section-content {
            font-size: 14px !important;
            line-height: 1.6 !important;
            color: #666 !important;
            text-align: justify !important;
            padding: 8px !important;
          }
          .suggestion-section {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-left: 4px solid #00b4f1;
            border-radius: 4px;
            page-break-inside: avoid;
          }
          .suggestion-header {
            font-size: 16px;
            font-weight: bold;
            color: #00b4f1;
            margin-bottom: 12px;
          }
          .suggestion-content {
            font-size: 14px;
            line-height: 1.6;
          }
          .sub-section {
            margin: 15px 0;
            padding: 12px;
            background-color: white;
            border-radius: 4px;
          }
          .sub-title {
            font-size: 14px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 8px;
          }
          .problem-item {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-left: 4px solid #00b4f1;
            border-radius: 4px;
            page-break-inside: avoid;
          }
          .problem-title {
            font-size: 16px;
            font-weight: bold;
            color: #00b4f1;
            margin-bottom: 10px;
          }
          .problem-definition {
            margin: 10px 0;
            padding: 10px;
            background-color: white;
            border-left: 3px solid #00b4f1;
            border-radius: 4px;
          }
          .summary-title {
            font-size: 15px;
            font-weight: bold;
            color: #00b4f1;
            margin: 15px 0 8px 0;
          }
          .summary-content {
            font-size: 14px;
            line-height: 1.6;
            background-color: white;
            padding: 10px;
            border-left: 3px solid #00b4f1;
            border-radius: 4px;
          }
          .stats-item-line {
            margin: 8px 0;
            font-size: 14px;
          }
          .level-table {
            width: 100%;
            margin: 15px 0;
            table-layout: fixed;
            page-break-inside: avoid;
          }
          .level-table th {
            background-color: #e6e6e6;
            font-weight: bold;
            padding: 8px;
            font-size: 12px;
            word-wrap: break-word;
          }
          .level-table td {
            padding: 8px;
            vertical-align: top;
            font-size: 11px;
            line-height: 1.4;
            word-wrap: break-word;
            overflow-wrap: break-word;
          }
          /* 等级表头样式 */
          .level-header-normal {
            background-color: #4caf50;
            color: white;
          }
          .level-header-mild {
            background-color: #ffc107;
            color: #333;
          }
          .level-header-moderate {
            background-color: #ff9800;
            color: white;
          }
          .level-header-severe {
            background-color: #f44336;
            color: white;
          }
          .level-header-default {
            background-color: #6c757d;
            color: white;
          }
          /* 等级单元格样式 */
          .level-cell-normal {
            background-color: rgba(76, 175, 80, 0.1);
            border-left: 3px solid #4caf50;
          }
          .level-cell-mild {
            background-color: rgba(255, 193, 7, 0.1);
            border-left: 3px solid #ffc107;
          }
          .level-cell-moderate {
            background-color: rgba(255, 152, 0, 0.1);
            border-left: 3px solid #ff9800;
          }
          .level-cell-severe {
            background-color: rgba(244, 67, 54, 0.1);
            border-left: 3px solid #f44336;
          }
          .level-cell-default {
            background-color: rgba(108, 117, 125, 0.1);
            border-left: 3px solid #6c757d;
          }
          .chart-image {
             max-width: 400px;
             height: auto;
             margin: 10px auto;
             text-align: center;
             page-break-inside: avoid;
           }
           .chart-image img {
             max-width: 400px;
             max-height: 300px;
             width: auto;
             height: auto;
           }
          .health-stats-description {
            margin: 20px 0;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #00b4f1;
          }
          .stats-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
          }
          .stats-items-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
          }
          .stats-item-line {
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 1.6;
            padding: 8px 0;
          }
          .stats-item-line .stats-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 12px;
            flex-shrink: 0;
          }
          .stats-item-line.good .stats-dot {
            background-color: #4caf50;
          }
          .stats-item-line.warning-1 .stats-dot {
            background-color: #dc3545;
          }
          .stats-item-line.warning-2 .stats-dot {
            background-color: #fd7e14;
          }
          .stats-item-line.warning-3 .stats-dot {
            background-color: #ffc107;
          }
          .stats-item-line .stats-text {
            color: #333;
            font-weight: 500;
          }
          .health-overview {
            display: flex;
            gap: 20px;
            margin: 20px 0;
          }
          .overview-left,
          .overview-right {
            flex: 1;
          }
          .overview-title {
            background: linear-gradient(135deg, #00b4f1, #0099cc);
            color: white;
            padding: 12px 20px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 0;
            border-radius: 4px 4px 0 0;
          }
          .somatic-description {
            margin: 20px 0 30px 0;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #00b4f1;
          }
          .somatic-description .description-text {
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            margin-bottom: 10px;
          }
          .somatic-description .description-note {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            font-style: italic;
          }
          .somatic-chart-section,
          .grade-chart-section {
            margin: 30px 0;
          }
          .somatic-chart-container,
          .grade-chart-container {
            border: 1px solid #dcdfe6;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
          .somatic-chart-container .chart-title,
          .grade-chart-container .chart-title {
            background: linear-gradient(135deg, #00b4f1, #0099cc);
            color: white;
            padding: 15px 20px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            margin: 0;
          }
          .somatic-chart-container .chart-content,
          .grade-chart-container .chart-content {
            background: white;
            padding: 20px;
          }
          .problem-analysis-section {
            margin-top: 25px;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #00b4f1;
          }
          .problem-analysis-section .analysis-text {
            font-size: 14px;
            line-height: 1.6;
            color: #333;
          }
          .problem-analysis-section .analysis-text p {
            margin: 0 0 15px 0;
          }
          .problem-analysis-section .analysis-text p:last-child {
            margin-bottom: 0;
          }
          .problem-analysis-section .highlight-text {
            color: #00b4f1;
            font-weight: 600;
          }
          .no-data {
            text-align: center;
            padding: 40px 20px;
            color: #999;
            font-size: 16px;
          }
          /* 隐藏导出按钮 */
          .export-btn-container {
            display: none;
          }
          /* 响应式设计 - Word中简化处理 */
          @media print {
            .report-bg {
              background: white;
              padding: 0;
            }
            .report-container {
              box-shadow: none;
              max-width: 100%;
            }
          }
        `;

        // 克隆元素并处理图表
        const clonedElement = exportEl.cloneNode(true);
        
        console.log('开始处理Word导出...');
        
        // 首先处理状态条和卡片的特殊样式（在表格处理之前）
        console.log('处理状态条和卡片样式...');
        this.processSpecialElements(clonedElement);
        
        // 处理Element UI表格，转换为标准HTML表格
        console.log('处理Element UI表格...');
        this.processElementTables(clonedElement);
        
        // 再次处理特殊元素样式，确保样式生效
        console.log('二次处理特殊元素样式...');
        this.processSpecialElements(clonedElement);
        
        // 替换图表元素为图片
        const chartElements = clonedElement.querySelectorAll('.chart-container, .statistics-chart, [id*="Chart"], [id*="chart"]');
        chartElements.forEach(el => {
          let chartId = el.id;
          if (!chartId) {
            const chartChild = el.querySelector('[id*="Chart"], [id*="chart"]');
            if (chartChild) {
              chartId = chartChild.id;
            }
          }
          
          if (chartId && chartImages[chartId]) {
            const imgElement = document.createElement('div');
            imgElement.className = 'chart-image';
            imgElement.innerHTML = `<img src="${chartImages[chartId]}" style="max-width: 400px; max-height: 300px; width: auto; height: auto;" />`;
            el.parentNode.replaceChild(imgElement, el);
          } else {
            // 如果没有找到对应的图片，添加调试信息
            console.warn(`未找到图表 ${chartId} 的图片，可用图片:`, Object.keys(chartImages));
            const placeholder = document.createElement('div');
            placeholder.innerHTML = '<p style="text-align: center; color: #666; font-style: italic; padding: 20px; background-color: #f8f9fa; border: 1px dashed #ddd; border-radius: 4px;">注：此处为图表内容，请查看原始报告</p>';
            el.parentNode.replaceChild(placeholder, el);
          }
        });

        // 组装完整 HTML 以转成 DOCX
        const fullHtml = `
          <!DOCTYPE html>
          <html>
            <head>
              <meta charset="utf-8" />
              <title>心理健康测评报告</title>
              <style>${styles}</style>
            </head>
            <body>${clonedElement.innerHTML}</body>
          </html>`;

        // 动态按需加载
        const [{ default: HTMLDocx }, { saveAs }] = await Promise.all([
          import('html-docx-js/dist/html-docx'),
          import('file-saver')
        ]);

        const blob = HTMLDocx.asBlob(fullHtml);
        const filename = `心理健康测评报告_${new Date().getTime()}.docx`;
        saveAs(blob, filename);

        this.$message.closeAll();
        this.$message({
          message: 'Word导出成功',
          type: 'success',
          duration: 2000
        });
      } catch (err) {
        console.error('Word导出失败', err);
        this.$message.closeAll();
        this.$message.error('Word导出失败，请重试');
      }
    },

    showCollective() {
      // 跳转到集体报告页面
      this.$router.push("/report/collective");
    },

    initPieChart() {
      const chartDom = document.getElementById("pieChart");
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);
      this.charts.push(myChart);

      // 处理API数据生成饼图数据
      const pieData = [];
      if (this.reportData && this.reportData.assessPipChart) {
        // 映射API返回的数据到图表所需的格式 - 四等级颜色体系
        const colorMap = {
          // 四个核心等级颜色定义
          '无': '#4caf50',           // 绿色 - 无问题
          '轻度': '#ffc107',         // 黄色 - 轻度问题  
          '中度': '#ff9800',         // 橙色 - 中度问题
          '重度': '#f44336',         // 红色 - 重度问题
          
          '心理健康良好': "#4caf50",
          '心理状况良好': "#4caf50",
          '心理健康欠佳': "#ffc107",
          "3级预警": "#ffc107",
          "3级关注": "#ffc107",
          "2级预警": "#ff9800",
          "2级关注": "#ff9800",
          "1级预警": "#f44336",
          "1级关注": "#f44336",
          
          // 无的各种表达方式
          '正常': '#4caf50',
          '无问题': '#4caf50',
          '无症状': '#4caf50'
        };

        // 映射名称
        const nameMap = {
          心理健康良好: "心理状况良好",
          心理健康欠佳: "心理健康欠佳",
          "3级预警": "3级关注（轻度心理问题）",
          "3级关注": "3级关注（轻度心理问题）",
          "2级预警": "2级关注（中度心理问题）",
          "2级关注": "2级关注（中度心理问题）",
          "1级预警": "1级关注（重度心理问题）",
          "1级关注": "1级关注（重度心理问题）",
        };

        this.reportData.assessPipChart.forEach((item) => {
          pieData.push({
            value: item.value,
            name: nameMap[item.data] || item.data,
            itemStyle: {
              color: colorMap[item.data] || "#409EFF",
            },
          });
        });
      }

      // 如果没有数据，使用默认数据
      if (pieData.length === 0) {
        pieData.push(
          { value: 50, name: "无", itemStyle: { color: "#4caf50" } },       // 绿色 - 无问题
          { value: 25, name: "轻度", itemStyle: { color: "#ffc107" } },     // 黄色 - 轻度问题
          {
            value: 15,
            name: "中度",
            itemStyle: { color: "#ff9800" },                              // 橙色 - 中度问题
          },
          {
            value: 10,
            name: "重度",
            itemStyle: { color: "#f44336" },                              // 红色 - 重度问题
          }
        );
      }

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}人 ({d}%)",
        },
        legend: {
          orient: "horizontal",
          bottom: "0%",
          left: "center",
          formatter: function (name) {
            // 找到对应的数据项
            const item = pieData.find((data) => data.name === name);
            if (item) {
              return `${name}: ${item.value}人`;
            }
            return name;
          },
        },
        series: [
          {
            name: "心理健康水平",
            type: "pie",
            radius: "55%",
            center: ["50%", "45%"],
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            label: {
              normal: {
                formatter: "{b}: {c}人 ({d}%)",
              },
            },
          },
        ],
      };

      myChart.setOption(option);

      // 窗口大小变化时重绘图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    initHealthPieChart() {
      const chartDom = document.getElementById("healthPieChart");
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);
      this.charts.push(myChart);
      
      // 检查数据是否已加载，如果没有数据则使用默认数据
      let assessPipChartData = [];
      if (this.reportData && this.reportData.assessPipChart) {
        assessPipChartData = this.reportData.assessPipChart;
        console.log(this.reportData.assessPipChart,'assessPipChart数据');
      } else {
        console.log('assessPipChart数据未加载，使用默认数据');
        // 使用默认数据确保图表能正常显示
        assessPipChartData = [
          { data: '心理健康良好', value: 0, man: 0, woman: 0 },
          { data: '1级预警', value: 0, man: 0, woman: 0 },
          { data: '2级预警', value: 0, man: 0, woman: 0 },
          { data: '3级预警', value: 0, man: 0, woman: 0 }
        ];
      }
      
      // 定义颜色映射 - 与表格等级颜色保持一致，四等级颜色体系
      const colorMap = {
        // 四个核心等级颜色定义
        '无': '#4caf50',           // 绿色 - 无问题
        '轻度': '#ffc107',         // 黄色 - 轻度问题  
        '中度': '#ff9800',         // 橙色 - 中度问题
        '重度': '#f44336',         // 红色 - 重度问题
        
        '心理健康良好': '#4caf50',
        '心理状况良好': '#4caf50',
        '心理健康欠佳': '#ffc107',
        '1级预警': '#f44336',
        '1级关注': '#f44336',
        '2级预警': '#ff9800',
        '2级关注': '#ff9800',
        '3级预警': '#ffc107',
        '3级关注': '#ffc107',
        
        // 无的各种表达方式
        '正常': '#4caf50',
        '无问题': '#4caf50',
        '无症状': '#4caf50'
      };
      
      // 使用assessPipChart数据
      const pieData = assessPipChartData.map(item => ({
        value: item.value,
        name: item.data,
        man: item.man || 0,
        woman: item.woman || 0,
        itemStyle: {
          color: colorMap[item.data] || '#999',
          borderColor: '#fff',
          borderWidth: 2
        }
      }))

      // 计算总人数
      const totalCount = pieData.reduce((sum, item) => sum + item.value, 0);
      
      // 计算心理健康良好的数据
      const goodData = pieData.find(item => item.name === '心理健康良好') || { value: 0, man: 0, woman: 0 };
      const goodPercentage = totalCount > 0 ? ((goodData.value / totalCount) * 100).toFixed(2) : 0;

      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: function(params) {
            const data = params.data;
            let result = params.name + ': ' + params.value + '人 (' + params.percent + '%)';
            if (data.man !== undefined && data.woman !== undefined) {
              result += '<br/>男生: ' + data.man + '人<br/>女生: ' + data.woman + '人';
            }
            return result;
          }
        },
        legend: {
          orient: 'horizontal',
          bottom: '5%',
          left: 'center',
          itemGap: 20,
          textStyle: {
            fontSize: 12,
            color: '#333'
          },
          formatter: function(name) {
            return name;
          }
        },
      
        series: [
          {
            name: '心理健康情况',
            type: 'pie',
            radius: '50%',
            center: ['50%', '35%'],
            data: pieData,
            emphasis: {
              scale: true,
              scaleSize: 5,
              itemStyle: {
                shadowBlur: 15,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              },
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{c}人',
              fontSize: 11,
              color: '#333',
              fontWeight: 'normal'
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              lineStyle: {
                color: '#999',
                width: 1
              }
            },
            animationType: 'expansion',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      };

      myChart.setOption(option);

      // 添加鼠标事件
      myChart.on('mouseover', function(params) {
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        });
      });

      myChart.on('mouseout', function(params) {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: params.dataIndex
        });
      });

      // 窗口大小变化时重绘图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    initBarChart() {
      const chartDom = document.getElementById("barChart");
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);
      this.charts.push(myChart);

      // 处理API数据生成柱状图数据
      const categories = [];
      const barData = [];

      if (this.reportData && this.reportData.assessSchoolWholeChart) {
        // 从API数据中提取类别和数值
        this.reportData.assessSchoolWholeChart.forEach((item) => {
          categories.push(item.name);

          // 根据值大小确定颜色 - 与表格等级颜色保持一致
          let color = "#4caf50"; // 默认绿色（良好）
          if (item.value > 3) {
            color = "#f44336"; // 严重问题-红色
          } else if (item.value > 2) {
            color = "#ff9800"; // 中度问题-橙色
          } else if (item.value > 1) {
            color = "#ffc107"; // 轻度问题-黄色
          } else if (item.value > 0.5) {
            color = "#ffc107"; // 健康欠佳-黄色
          }

          barData.push({
            value: item.value,
            itemStyle: { color: color },
          });
        });
      }

      // 如果没有数据，使用默认数据
      if (categories.length === 0) {
        categories = [
          "抑郁",
          "焦虑",
          "强迫",
          "敌对",
          "人际关系敏感",
          "偏执",
          "恐怖",
          "精神病性",
          "其他",
        ];
        barData = [
          { value: 0.5, itemStyle: { color: "#4caf50" } },
          { value: 0.8, itemStyle: { color: "#4caf50" } },
          { value: 1.2, itemStyle: { color: "#ffc107" } },
          { value: 0.6, itemStyle: { color: "#4caf50" } },
          { value: 1.7, itemStyle: { color: "#ffc107" } },
          { value: 0.9, itemStyle: { color: "#4caf50" } },
          { value: 0.4, itemStyle: { color: "#4caf50" } },
          { value: 0.3, itemStyle: { color: "#4caf50" } },
          { value: 0.7, itemStyle: { color: "#4caf50" } },
        ];
      }

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            const param = params[0];
            let level = "良好";
            if (param.value > 3) {
              level = "重度问题";
            } else if (param.value > 2) {
              level = "中度问题";
            } else if (param.value > 1) {
              level = "轻度问题";
            } else if (param.value > 0.5) {
              level = "健康欠佳";
            }
            return `${param.name}: ${param.value} (${level})`;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            interval: 0,
            rotate: 30,
            fontSize: 12,
          },
        },
        yAxis: {
          type: "value",
          name: "得分",
          min: 0,
          max: 4,
          interval: 1,
          axisLine: {
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "得分",
            type: "bar",
            barWidth: "60%",
            data: barData,
          },
        ],
      };

      myChart.setOption(option);

      // 窗口大小变化时重绘图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    getReportData() {
      this.loading = true;
      // 从API获取报告数据
      getReportOverview({
        // 根据URL参数获取数据
        deptId: this.queryParams.deptId,
        taskId: this.queryParams.taskId,
      })
        .then((response) => {
          if (response.code === 200) {
            // 保存原始数据
            this.reportData = response.data;

            // 处理学生表格数据
            this.processStudentTable();

            // 处理等级分布表格数据
            this.processLevelTable();

            // 处理当前学生心理健康等级
            this.processCurrentHealthLevel();

            // 处理具体心理问题类型
            this.processProblemTypes();
            
            // 生成躯体问题数据
            this.generateSomaticProblemsData();

            console.log("获取报告数据成功", this.reportData);
          } else {
            this.$message.error(response.msg || "获取报告数据失败");
          }
          this.loading = false;
        })
        .catch((error) => {
          console.error("获取报告数据失败", error);
          this.$message.error("获取报告数据失败");
          this.loading = false;
        });
    },

    // 处理学生表格数据
    processStudentTable() {
      if (!this.reportData || !this.reportData.assessObject) return;

      // 使用assessWarnList获取学生详细信息
      const studentInfo =
        this.reportData.assessWarnList &&
        this.reportData.assessWarnList.length > 0
          ? this.reportData.assessWarnList[0]
          : null;

      this.studentTable = this.reportData.assessObject.map((item) => {
        return {
          name: item.name || "未知",
          count: item.count,
          man: item.man,
          woman: item.woman,
        };
      });
    },

    // 处理等级分布表格数据
    processLevelTable() {
      if (!this.reportData || !this.reportData.assessBarChart) return;

      this.levelTable = this.reportData.assessBarChart.map((item) => {
        // 找到各级预警人数
        const levelCounts = {
          goodCount: 0,
          subCount: 0,
          mildCount: 0,
          moderateCount: 0,
          severeCount: 0,
        };

        if (item.data && Array.isArray(item.data)) {
          item.data.forEach((levelData) => {
            switch (levelData.data) {
              case "心理健康良好":
                levelCounts.goodCount = levelData.value;
                break;
              case "心理健康欠佳":
                levelCounts.subCount = levelData.value;
                break;
              case "3级预警":
              case "3级关注":
                levelCounts.mildCount = levelData.value;
                break;
              case "2级预警":
              case "2级关注":
                levelCounts.moderateCount = levelData.value;
                break;
              case "1级预警":
              case "1级关注":
                levelCounts.severeCount = levelData.value;
                break;
            }
          });
        }

        return {
          level: item.name || "未知年级",
          ...levelCounts,
        };
      });
      
      // 生成健康概览表格数据
      this.generateHealthOverviewTable();
    },
    
    // 生成健康概览表格数据
    generateHealthOverviewTable() {
      if (!this.reportData || !this.reportData.assessPipChart) {
        this.healthOverviewTableData = [];
        return;
      }
      
      const chartData = this.reportData.assessPipChart;
      let total = 0;
      const tableData = [];
      
      // 定义分类顺序
      const categories = ['心理健康良好', '1级预警', '2级预警', '3级预警'];
      
      // 计算总人数
      total = chartData.reduce((sum, item) => sum + item.value, 0);
      
      // 按顺序生成表格数据
      categories.forEach(category => {
        const item = chartData.find(data => data.data === category);
        const count = item ? item.value : 0;
        const percentage = total > 0 ? Math.round((count / total) * 100) : 0;
        
        tableData.push({
          category: category,
          count: count,
          percentage: percentage + '%'
        });
      });
      
      // 添加合计行
      tableData.push({
        category: '合计',
        count: total,
        percentage: '100%'
      });
      
      this.healthOverviewTableData = tableData;
    },
    
    // 生成躯体问题数据
    generateSomaticProblemsData() {
      // 模拟躯体问题数据，实际中应该从 API 获取
      const somaticProblems = [
        { category: '睡眠问题', count: 8, percentage: '26.7%' },
        { category: '食欲变化', count: 5, percentage: '16.7%' },
        { category: '头痛头晕', count: 4, percentage: '13.3%' },
        { category: '疲劳乏力', count: 6, percentage: '20.0%' },
        { category: '胃肠不适', count: 3, percentage: '10.0%' },
        { category: '其他症状', count: 4, percentage: '13.3%' }
      ];
      
      this.somaticProblemsTableData = somaticProblems;
    },
    
    // 初始化躯体问题柱状图
    initSomaticProblemsBarChart() {
      const chartDom = document.getElementById('somaticProblemsBarChart');
      if (!chartDom) return;
      
      const myChart = echarts.init(chartDom);
      this.charts.push(myChart);
      
      // 使用真实的assessSchoolWholeChart数据
      let somaticData = [];
      
      if (this.reportData && this.reportData.assessSchoolWholeChart) {
        // 排序：按百分比从高到低排序
        const sortedData = [...this.reportData.assessSchoolWholeChart]
          .sort((a, b) => {
            const aPercent = parseFloat(a.percentage.replace('%', ''));
            const bPercent = parseFloat(b.percentage.replace('%', ''));
            return bPercent - aPercent; // 从高到低排序
          });
        
        somaticData = sortedData.map((item, index) => ({
          name: item.name,
          value: parseFloat(item.percentage.replace('%', '')),
          count: item.value,
          color: this.getPsychHealthProblemColor(item.name, index)
        }));
      }
      
      const categories = somaticData.map(item => item.name);
      const values = somaticData.map(item => ({
        value: item.value,
        count: item.count,
        itemStyle: {
          color: item.color,
          borderRadius: [0, 4, 4, 0] // 右侧圆角
        }
      }));
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const param = params[0];
            const data = values[param.dataIndex];
            return `${param.name}: ${param.value}% (${data.count}人)`;
          }
        },
        grid: {
          left: '5%',
          right: '15%',
          bottom: '10%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: '',
          max: function(value) {
            // 动态计算最大值，给出一些余量
            return Math.max(Math.ceil(value.max / 10) * 10, 10);
          },
          interval: 10,
          axisLabel: {
            formatter: '{value}%'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e0e0e0'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: categories,
          axisLabel: {
            fontSize: 12,
            color: '#333'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: '检出率',
            type: 'bar',
            barWidth: '50%',
            data: values,
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                const data = values[params.dataIndex];
                return `${params.value}% (${data.count}人)`;
              },
              fontSize: 12,
              color: '#333'
            }
          }
        ]
      };
      
      myChart.setOption(option);
      
      // 窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    
    // 初始化年级心理健康问题分布柱状图
    initGradeDistributionChart() {
      const chartDom = document.getElementById('gradeDistributionChart');
      if (!chartDom) return;
      
      const myChart = echarts.init(chartDom);
      this.charts.push(myChart);
      
      // 使用assessDistributionOrderDesc数据
      let gradeData = {
        categories: [],
        series: []
      };
      
      if (this.reportData && this.reportData.assessDistributionOrderDesc) {
        const apiGradeData = this.reportData.assessDistributionOrderDesc;
        console.log('assessDistributionOrderDesc数据:', apiGradeData);
        
        // 提取年级名称
        const grades = apiGradeData.map(item => item.name).filter(name => name);
        console.log('年级列表:', grades);
        
        // 收集所有问题类型并去重
        const problemTypesSet = new Set();
        apiGradeData.forEach(grade => {
          if (grade.data && Array.isArray(grade.data)) {
            grade.data.forEach(problem => {
                problemTypesSet.add(problem.name);
            });
          }
        });
        
        // 将问题类型转换为数组并按第一个年级的检出比例排序
        let problemTypeArray = Array.from(problemTypesSet);
        
        // 获取第一个有数据的年级用于排序
        const firstGradeWithData = apiGradeData.find(grade => 
          grade.data && Array.isArray(grade.data) && grade.data.length > 0
        );
        
        if (firstGradeWithData) {
          // 按检出比例从高到低排序
          problemTypeArray.sort((a, b) => {
            const aData = firstGradeWithData.data.find(item => item.name === a);
            const bData = firstGradeWithData.data.find(item => item.name === b);
            
            const aValue = aData ? parseFloat(aData.percentage.replace('%', '')) : 0;
            const bValue = bData ? parseFloat(bData.percentage.replace('%', '')) : 0;
            
            return bValue - aValue; // 从高到低排序
          });
        }
        
        console.log('排序后的问题类型:', problemTypeArray);
        
        // 为每个问题类型创建系列数据
        const series = problemTypeArray.map((problemType, index) => {
          const data = grades.map(gradeName => {
            const gradeInfo = apiGradeData.find(g => g.name === gradeName);
            if (gradeInfo && gradeInfo.data && Array.isArray(gradeInfo.data)) {
              const problemInfo = gradeInfo.data.find(p => p.name === problemType);
              return problemInfo ? parseFloat(problemInfo.percentage.replace('%', '')) : 0;
            }
            return 0;
          });
          
          return {
            name: problemType,
            data: data,
            color: this.getProblemTypeColor(problemType, index)
          };
        });
        console.log(series,'series')
        gradeData = {
          categories: grades,
          series: series
        };
        
        console.log('图表数据:', gradeData);
      } 
      
      // 创建系列数据
      const series = gradeData.series.map(item => ({
        name: item.name,
        type: 'bar',
        data: item.data,
        itemStyle: {
          color: item.color,
          borderRadius: [4, 4, 0, 0] // 顶部圆角
        },
        label: {
          show: true,
          position: 'top',
          formatter: function(params) {
            return params.value > 0 ? params.value + '%' : '';
          },
          fontSize: 10
        }
      }));
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let result = params[0].name + '<br/>';
            params.forEach(param => {
              if (param.value > 0) {
                result += param.marker + param.seriesName + ': ' + param.value + '%<br/>';
              }
            });
            return result;
          }
        },
        legend: {
          data: gradeData.series.map(item => item.name),
          bottom: '0%',
          textStyle: {
            fontSize: 10
          },
          itemGap: 15
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '20%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: gradeData.categories,
          axisLabel: {
            fontSize: 12,
            color: '#333'
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value',
          name: '检出率(%)',
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value}%'
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e0e0e0'
            }
          }
        },
        series: series
      };
      
      myChart.setOption(option);
      
      // 窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    
    // 获取心理健康问题类型颜色
    // 遵循心理健康等级颜色编码规范：
    // - 绿色(#4caf50): 心理健康良好
    // - 红色(#f44336): 一级预警
    // - 橙色(#ff9800): 二级预警
    // - 黄色(#ffc107): 三级预警
    getPsychHealthProblemColor(problemType, index) {
      const colorMap = {
        '躯体化症状': '#ff6b6b',  // 红色系
        '抑郁': '#dc3545',        // 一级预警颜色 
        '焦虑': '#ff9800',        // 橙色系
        '手机成瘾': '#f9ca24',    // 黄色系
        '自尊': '#4caf50',        // 积极指标，绿色
        '幸福感': '#4caf50',      // 积极指标，绿色
        '自伤自杀意念': '#b71c1c', // 严重级别，深红色
        '睡眠问题': '#6c5ce7',   // 紫色系
        '心理弹性': '#74b9ff',   // 蓝色系
        '其他': '#6c5ce7'         // 默认紫色
      };
      
      if (colorMap[problemType]) {
        return colorMap[problemType];
      }
      
      // 如果没有预定义颜色，使用默认颜色序列
      const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
      return defaultColors[index % defaultColors.length];
    },
    
    // 获取问题类型颜色 - 与心理健康等级颜色体系保持一致
    getProblemTypeColor(problemType, index) {
      const colorMap = {
        '躯体化症状': '#ff6b6b',
        '抑郁': '#4ecdc4', 
        '焦虑': '#45b7d1',
        '手机成瘾': '#f9ca24',
        '自尊': '#f0932b',
        '幸福感': '#eb4d4b',
        '睡眠问题': '#6c5ce7',
        '自伤自杀意念': '#e17055',
        '心理弹性': '#74b9ff',
        '其他': '#a29bfe'
      };
      
      if (colorMap[problemType]) {
        return colorMap[problemType];
      }
      
      // 如果没有预定义颜色，使用默认颜色序列
      const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
      return defaultColors[index % defaultColors.length];
    },
    
    // 获取躯体问题颜色
    getSomaticProblemColor(category) {
      const colorMap = {
        '睡眠问题': '#ff6b6b',
        '食欲变化': '#4ecdc4',
        '头痛头晕': '#45b7d1',
        '疲劳乏力': '#f9ca24',
        '胃肠不适': '#f0932b',
        '其他症状': '#eb4d4b'
      };
      return colorMap[category] || '#6c5ce7';
    },

    
    // 初始化躯体化症状饼图
    initSomatizationPieChart() {
      const chartDom = document.getElementById('somatizationPieChart');
      if (!chartDom) return;
      
      const myChart = echarts.init(chartDom);
      this.charts.push(myChart);
      
      // 模拟躯体化症状数据（按图片中的数据）- 与表格等级颜色保持一致
      const somatizationData = [
        { name: '无躯体化症状', value: 0, percentage: 0, color: '#4caf50' },
        { name: '轻度躯体化症状', value: 1, percentage: 33.34, color: '#ffc107' },
        { name: '中度躯体化症状', value: 1, percentage: 33.33, color: '#ff9800' },
        { name: '重度躯体化症状', value: 1, percentage: 33.33, color: '#f44336' }
      ];
      
      // 过滤出有数据的项目
      const pieData = somatizationData.filter(item => item.value > 0).map(item => ({
        value: item.value,
        name: item.name,
        percentage: item.percentage,
        itemStyle: {
          color: item.color,
          borderColor: '#fff',
          borderWidth: 2
        }
      }));
      
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: 'transparent',
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: function(params) {
            return params.name + ': ' + params.value + '人 (' + params.percent + '%)';
          }
        },
        legend: {
          orient: 'horizontal',
          bottom: '2%',
          left: 'center',
          itemGap: 25,
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 12,
            color: '#333'
          },
          data: pieData.map(item => item.name)
        },
        series: [
          {
            name: '躯体化症状情况',
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['50%', '42%'],
            data: pieData,
            emphasis: {
              scale: true,
              scaleSize: 5,
              itemStyle: {
                shadowBlur: 15,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function(params) {
                return params.value + '人 (' + params.percent + '%)';
              },
              fontSize: 11,
              color: '#333',
              fontWeight: 'normal'
            },
            labelLine: {
              show: true,
              length: 8,
              length2: 8,
              lineStyle: {
                color: '#999',
                width: 1
              }
            },
            animationType: 'expansion',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      
      myChart.setOption(option);
      
      // 窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    
    // 处理当前学生心理健康等级
    processCurrentHealthLevel() {
      if (!this.reportData || !this.reportData.assessPipChart) return;

      // 分析整体健康水平
      let maxLevel = null;
      let maxValue = -1;

      this.reportData.assessPipChart.forEach((item) => {
        if (item.value > maxValue) {
          maxValue = item.value;
          maxLevel = item.data;
        }
      });

      // 映射健康级别
      const levelMapping = {
        心理健康良好: "good",
        心理健康欠佳: "sub",
        "3级预警": "mild",
        "3级关注": "mild",
        "2级预警": "moderate",
        "2级关注": "moderate",
        "1级预警": "severe",
        "1级关注": "severe",
      };

      this.currentHealthLevel = levelMapping[maxLevel] || "good";
    },

    // 处理具体心理问题类型
    processProblemTypes() {
      if (!this.reportData || !this.reportData.assessSpecificList) return;

      this.problemTypes = this.reportData.assessSpecificList.map((problem) => {
        // 查找问题最严重的级别
        let severestLevel = null;
        let maxValue = -1;

        if (problem.pipChart && Array.isArray(problem.pipChart)) {
          problem.pipChart.forEach((level) => {
            if (level.value > maxValue) {
              maxValue = level.value;
              severestLevel = level.name;
            }
          });
        }

        return {
          name: problem.name,
          definition: problem.definition,
          summary: problem.summary,
          severestLevel: severestLevel,
          pipChart: problem.pipChart || [],
          level: problem.level || [],
        };
      });
    },
    getLevelTagType(level) {
      switch (level) {
        case "极低":
        case "重度":
          return "danger";
        case "较低":
        case "中度":
          return "warning";
        case "轻度":
          return "warning";
        case "正常":
        case "较高":
        case "很高":
          return "success";
        default:
          return "info";
      }
    },
    
    // 获取等级表头样式类
    getLevelHeaderClass(level) {
      switch (level) {
        case '正常':
          return 'level-header-normal';
        case '轻度':
          return 'level-header-mild';
        case '中度':
          return 'level-header-moderate';
        case '重度':
          return 'level-header-severe';
        case '极低':
          return 'level-header-severe';
        case '较低':
          return 'level-header-moderate';
        case '较高':
          return 'level-header-normal';
        case '很高':
          return 'level-header-normal';
        default:
          return 'level-header-default';
      }
    },
    
    // 获取等级单元格样式类
    getLevelCellClass(level) {
      switch (level) {
        case '正常':
          return 'level-cell-normal';
        case '轻度':
          return 'level-cell-mild';
        case '中度':
          return 'level-cell-moderate';
        case '重度':
          return 'level-cell-severe';
        case '极低':
          return 'level-cell-severe';
        case '较低':
          return 'level-cell-moderate';
        case '较高':
          return 'level-cell-normal';
        case '很高':
          return 'level-cell-normal';
        default:
          return 'level-cell-default';
      }
    },
    // 为特定心理问题创建饼图
    initProblemPieChart(problemIndex) {
      if (!this.reportData || !this.reportData.assessSpecificList || !this.reportData.assessSpecificList[problemIndex]) {
        console.warn(`Problem data not found for index ${problemIndex}`);
        return;
      }

      const problem = this.reportData.assessSpecificList[problemIndex];
      const chartDom = document.getElementById(`problemPieChart${problemIndex}`);

      if (!chartDom) {
        console.error(`Chart DOM not found for problem index ${problemIndex}`);
        return;
      }

      // 检查是否已经存在图表实例
      const existingChart = this.charts.find(chart => chart.__problemIndex === problemIndex);
      if (existingChart) {
        existingChart.dispose();
        this.charts = this.charts.filter(chart => chart.__problemIndex !== problemIndex);
      }

      const myChart = echarts.init(chartDom);
      myChart.__problemIndex = problemIndex;
      this.charts.push(myChart);

      console.log(`初始化问题图表 ${problemIndex}:`, problem.name, problem.pipChart);

      // 映射颜色 - 与表格等级颜色保持一致，特别强化四个等级的颜色定义
      const colorMap = {
        // 四个核心等级颜色定义
        '无': '#4caf50',           // 绿色 - 无问题
        '轻度': '#ffc107',         // 黄色 - 轻度问题  
        '中度': '#ff9800',         // 橙色 - 中度问题
        '重度': '#f44336',         // 红色 - 重度问题
        
        // 无的各种表达方式
        '正常': '#4caf50',
        '无问题': '#4caf50', 
        '无症状': '#4caf50',
        '无躯体化症状': '#4caf50',
        '无抑郁症状': '#4caf50',
        '无焦虑症状': '#4caf50',
        '无手机成瘾倾向': '#4caf50',
        '无自伤自杀意念': '#4caf50',
        '没有': '#4caf50',
        '不存在': '#4caf50',
        
        // 轻度的各种表达方式
        '轻度问题': '#ffc107',
        '轻度症状': '#ffc107',
        '轻度躯体化症状': '#ffc107',
        '轻度抑郁': '#ffc107',
        '轻度焦虑': '#ffc107',
        '轻度手机成瘾倾向': '#ffc107',
        '轻度自伤自杀意念': '#ffc107',
        
        // 中度的各种表达方式
        '中度问题': '#ff9800',
        '中度症状': '#ff9800', 
        '中度躯体化症状': '#ff9800',
        '中度抑郁': '#ff9800',
        '中度焦虑': '#ff9800',
        '中度手机成瘾倾向': '#ff9800',
        '中度自伤自杀意念': '#ff9800',
        
        // 重度的各种表达方式
        '重度问题': '#f44336',
        '重度症状': '#f44336',
        '重度躯体化症状': '#f44336', 
        '重度抑郁': '#f44336',
        '重度焦虑': '#f44336',
        '重度手机成瘾倾向': '#f44336',
        '重度自伤自杀意念': '#f44336',
        
        // 自尊和幸福感的水平表达 - 反向映射（水平越高颜色越好）
        '自尊水平极低': '#f44336',  // 红色 - 自尊水平极低是问题
        '自尊水平较低': '#ff9800',  // 橙色
        '自尊水平较高': '#ffc107',  // 黄色
        '自尊水平很高': '#4caf50',  // 绿色 - 自尊水平高是好事
        
        '幸福感水平极低': '#f44336',  // 红色 - 幸福感低是问题
        '幸福感水平较低': '#ff9800',  // 橙色
        '幸福感水平较高': '#ffc107',  // 黄色
        '幸福感水平很高': '#4caf50',  // 绿色 - 幸福感高是好事
        
        // 失眠问题/睡眠问题颜色映射
        '无失眠问题': '#4caf50',       // 绿色 - 无失眠问题
        '轻度失眠问题': '#ffc107',     // 黄色 - 轻度失眠
        '中度失眠问题': '#ff9800',     // 橙色 - 中度失眠
        '重度失眠问题': '#f44336',     // 红色 - 重度失眠
        '无睡眠问题': '#4caf50',       // 绿色 - 无睡眠问题
        '轻度睡眠问题': '#ffc107',     // 黄色 - 轻度睡眠问题
        '中度睡眠问题': '#ff9800',     // 橙色 - 中度睡眠问题
        '重度睡眠问题': '#f44336',     // 红色 - 重度睡眠问题
        
        // 心理弹性颜色映射（反向映射 - 弹性越高颜色越好）
        '心理弹性水平极低': '#f44336', // 红色 - 心理弹性极低是问题
        '心理弹性水平较低': '#ff9800', // 橙色 - 心理弹性较低
        '心理弹性水平较高': '#ffc107', // 黄色 - 心理弹性较高
        '心理弹性水平很高': '#4caf50', // 绿色 - 心理弹性很高是好事
        '心理弹性极低': '#f44336',     // 红色
        '心理弹性较低': '#ff9800',     // 橙色
        '心理弹性较高': '#ffc107',     // 黄色
        '心理弹性很高': '#4caf50',     // 绿色
        
        // 心理健康等级
        '心理健康良好': '#4caf50',
        '心理状况良好': '#4caf50',
        '心理健康欠佳': '#ffc107',
        '3级预警': '#ffc107',
        '3级关注': '#ffc107',
        '3级关注（轻度心理问题）': '#ffc107',
        '2级预警': '#ff9800',
        '2级关注': '#ff9800',
        '2级关注（中度心理问题）': '#ff9800',
        '1级预警': '#f44336',
        '1级关注': '#f44336',
        '1级关注（重度心理问题）': '#f44336',
        
        // 程度描述
        '极低': '#f44336',
        '很低': '#f44336', 
        '较低': '#ff9800',
        '低': '#ff9800',
        '一般': '#ffc107',
        '中等': '#ffc107',
        '中': '#ffc107',
        '较高': '#4caf50',
        '高': '#4caf50',
        '很高': '#4caf50',
        '极高': '#4caf50',
        
        // 状态描述
        '有问题': '#f44336',
        '存在': '#f44336'
      };
      
      // 映射名称
      const nameMap = {
        '心理健康良好': '心理状况良好',
        '心理健康欠佳': '心理健康欠佳',
        '3级预警': '3级关注（轻度心理问题）',
        '3级关注': '3级关注（轻度心理问题）',
        '2级预警': '2级关注（中度心理问题）',
        '2级关注': '2级关注（中度心理问题）',
        '1级预警': '1级关注（重度心理问题）',
        '1级关注': '1级关注（重度心理问题）'
      };

      const pieData = [];
      if (problem.pipChart && Array.isArray(problem.pipChart) && problem.pipChart.length > 0) {
        problem.pipChart.forEach((item) => {
          // 验证数据有效性 - 支持两种数据结构：{name, value} 和 {data, value}
          const itemName = item.name || item.data;
          const itemValue = item.value;
          
          if (item && itemName && (itemValue || itemValue === 0) && itemValue >= 0) {
            
            const displayName = nameMap[itemName] || itemName;
            // 优先使用原始名称匹配颜色，如果没有则使用显示名称
            const color = colorMap[itemName] || colorMap[displayName] || '#6c757d';
            
            console.log(`颜色映射调试 - 原始名称: ${itemName}, 显示名称: ${displayName}, 颜色: ${color}`);

            pieData.push({
              value: Number(itemValue),
              name: displayName,
              itemStyle: { color: color }
            });
          }
        });
      }
      
      // 如果没有有效数据或数据总和为0，使用默认数据
      const totalValue = pieData.reduce((sum, item) => sum + item.value, 0);
      if (pieData.length === 0 || totalValue === 0) {
        console.warn(`问题图表 ${problemIndex} 没有有效数据，使用默认数据`);
        pieData.length = 0; // 清空数组
        pieData.push(
          { value: 50, name: '无', itemStyle: { color: '#4caf50' } },      // 绿色 - 无问题
          { value: 25, name: '轻度', itemStyle: { color: '#ffc107' } },    // 黄色 - 轻度问题
          { value: 15, name: '中度', itemStyle: { color: '#ff9800' } },    // 橙色 - 中度问题
          { value: 10, name: '重度', itemStyle: { color: '#f44336' } }     // 红色 - 重度问题
        );
      }
      
      console.log(`问题图表 ${problemIndex} 最终数据:`, pieData);

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '10%',
          top: 'center',
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 12
          },
          formatter: function (name) {
            const item = pieData.find(data => data.name === name);
            if (item) {
              return `${name}: ${item.value}人`;
            }
            return name;
          }
        },
        series: [
          {
            name: problem.name,
            type: 'pie',
            radius: ['15%', '50%'],
            center: ['30%', '50%'],
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {d}%'
            },
            labelLine: {
              show: true
            }
          }
        ]
      };

      myChart.setOption(option);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    // 销毁图表，避免内存泄漏
    this.charts.forEach((chart) => {
      chart.dispose();
    });

    // 移除窗口大小调整监听器
    window.removeEventListener("resize", this.resizeCharts);
  },
};
</script>

<style scoped>
.report-bg {
  background: #00b4f1;
  min-height: 100vh;
  padding: 30px 0;
}

.export-btn-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  display: flex;
  gap: 10px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: white;
}

.loading-text {
  margin-top: 15px;
  font-size: 18px;
}

.report-container {
  background: #fff;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.report-page {
  padding: 40px;
  break-after: page;
  page-break-after: always;
}

.report-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: #00b4f1;
  border-radius: 0;
  margin-bottom: 30px;
  padding: 15px 0;
}

.report-header {
  text-align: center;
  background: linear-gradient(135deg, #00b4f1 0%, #0099d4 100%);
  color: white;
  padding: 30px 20px;
  margin: -40px -40px 30px -40px;
  border-radius: 0;
}

.report-main-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 5px;
}

.report-date {
  font-size: 14px;
  opacity: 0.8;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e6f7ff;
  transition: transform 0.2s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.overview-card .card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #00b4f1;
  margin-bottom: 5px;
}

.card-desc {
  font-size: 12px;
  color: #999;
}

.section-card {
  margin-bottom: 32px;
}

.section-header {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 16px;
  text-align: center;
  padding: 8px 0;
}

.blue-bg {
  background-color: #00b4f1;
}

.section-subtitle {
  font-size: 16px;
  color: #00b4f1;
  margin: 20px 0 12px 0;
  font-weight: bold;
}

.section-list {
  margin: 0 0 16px 20px;
  color: #333;
  font-size: 15px;
}

.section-desc {
  font-size: 15px;
  color: #333;
  margin-bottom: 18px;
}

.section-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.level-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.level {
  padding: 10px 20px;
  border-radius: 20px;
  color: #fff;
  font-weight: bold;
  width: 100%;
  font-size: 16px;
  box-sizing: border-box;
  text-align: center;
}

.level.good {
  background: #4caf50;
}
.level.sub {
  background: #ffb300;
}
.level.mild {
  background: #ff9800;
}
.level.moderate {
  background: #f44336;
}
.level.severe {
  background: #b71c1c;
}

/* 心理健康等级状态条样式 */
.health-status-bar {
  display: flex;
  width: 100%;
  height: 45px;
  border-radius: 25px;
  overflow: hidden;
  margin: 25px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.status-segment {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.status-segment:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

.status-segment.good {
  background: #4caf50;
}

.status-segment.warning-1 {
  background: #f44336;
}

.status-segment.warning-2 {
  background: #ff9800;
}

.status-segment.warning-3 {
  background: #ffb300;
}

.status-segment span {
  white-space: nowrap;
  z-index: 1;
}

/* 心理健康等级卡片样式 */
.health-level-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

.health-card {
  border-radius: 0;
  overflow: hidden;
  background: white;
  position: relative;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.health-card.good {
  border-left: 4px solid #4caf50;
}

.health-card.warning-1 {
  border-left: 4px solid #b71c1c;
}

.health-card.warning-2 {
  border-left: 4px solid #ff5722;
}

.health-card.warning-3 {
  border-left: 4px solid #ff9800;
}

.health-card .card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-weight: bold;
  font-size: 16px;
  background: white;
  border-bottom: none;
}

.health-card.good .card-header {
  color: #4caf50;
}

.health-card.warning-1 .card-header {
  color: #b71c1c;
}

.health-card.warning-2 .card-header {
  color: #ff5722;
}

.health-card.warning-3 .card-header {
  color: #ff9800;
}

.health-card .card-title {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  color: white;
  border: none;
}

.health-card.good .card-title {
  background: #4caf50;
}

.health-card.warning-1 .card-title {
  background: #b71c1c;
}

.health-card.warning-2 .card-title {
  background: #ff5722;
}

.health-card.warning-3 .card-title {
  background: #ff9800;
}

.card-content {
  padding: 20px;
  background: #f8f9fa;
  position: relative;
  line-height: 1.6;
}

.card-content::before {
  display: none;
}

.level-section {
  margin-bottom: 25px;
  padding-left: 20px;
}

.level-section:last-child {
  margin-bottom: 0;
}

.level-section .section-title {
  font-weight: bold;
  font-size: 15px;
  color: #333;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e0e0e0;
}

.level-section .section-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  text-align: justify;
  padding-left: 0;
}

.heart-level {
  display: flex;
  align-items: center;
  margin: 30px 0;
  justify-content: center;
}

.heart {
  width: 100px;
  height: 90px;
  position: relative;
  margin-right: 20px;
  border-radius: 50px 50px 0 0;
  display: inline-block;
  animation: pulse 1.5s infinite ease-in-out;
}

.heart.good {
  background: #4caf50;
}
.heart.sub {
  background: #ffb300;
}
.heart.mild {
  background: #ff9800;
}
.heart.moderate {
  background: #f44336;
}
.heart.severe {
  background: #b71c1c;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 90px;
  background: inherit;
  border-radius: 50px 50px 0 0;
}

.heart::before {
  left: -50px;
}

.heart::after {
  left: 50px;
}

.heart-label {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.heart-label div {
  margin-bottom: 5px;
}

.heart.good + .heart-label {
  color: #4caf50;
}
.heart.sub + .heart-label {
  color: #ffb300;
}
.heart.mild + .heart-label {
  color: #ff9800;
}
.heart.moderate + .heart-label {
  color: #f44336;
}
.heart.severe + .heart-label {
  color: #b71c1c;
}

.level-desc {
  margin: 20px 0;
}

.desc-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.desc-content {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.chart-container {
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px;
}

.suggestion-title {
  font-weight: bold;
  margin: 15px 0 5px 0;
  color: #00b4f1;
}

.problem-item {
  margin-bottom: 25px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.problem-item:last-child {
  border-bottom: none;
}

.problem-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  background-color: #f5f7fa;
  padding: 8px 12px;
  border-radius: 4px;
}

.problem-desc {
  color: #606266;
  line-height: 1.6;
}

.problem-desc p {
  margin: 8px 0;
}

.view-more-btn {
  text-align: center;
  margin: 20px 0;
}

.problem-detail-card {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 15px;
}

.problem-definition {
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.problem-chart-container {
  width: 100%;
  margin: 20px 0;
  border-radius: 4px;
  padding: 10px;
}

.problem-summary {
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.6;
}

.problem-levels {
  margin-top: 20px;
}

.level-title {
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  color: #333;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@media screen and (max-width: 768px) {
  .overview-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .report-main-title {
    font-size: 22px;
  }

  .report-header {
    padding: 20px 15px;
    margin: -40px -20px 20px -20px;
  }

  .report-page {
    padding: 20px;
  }

  .report-title {
    font-size: 20px;
  }

  .section-header {
    font-size: 16px;
  }

  .heart {
    width: 80px;
    height: 70px;
  }

  .heart::before,
  .heart::after {
    width: 80px;
    height: 70px;
  }

  .heart::before {
    left: -40px;
  }

  .heart::after {
    left: 40px;
  }

  .heart-label {
    font-size: 18px;
  }

  .export-btn-container {
    flex-direction: column;
    top: 10px;
    right: 10px;
  }
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .health-status-bar {
    height: 40px;
    border-radius: 20px;
    margin: 20px 0;
  }

  .status-segment {
    font-size: 13px;
  }

  .health-level-cards {
    gap: 15px;
  }

  .health-card .card-header {
    padding: 12px 15px;
  }

  .health-card .card-content {
    padding: 15px;
  }

  .health-card .card-title {
    font-size: 16px;
  }

  .level-section {
    padding-left: 15px;
  }

  .level-section .section-title {
    font-size: 14px;
  }

  .level-section .section-content {
    font-size: 13px;
  }
}

/* 心理健康统计数据样式 */
.health-stats-description {
  margin: 20px 0;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #00b4f1;
}

.health-stats-description .stats-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.stats-items-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-item-line {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.6;
  padding: 8px 0;
}

.stats-item-line .stats-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.stats-item-line.good .stats-dot {
  background-color: #4caf50;
}

.stats-item-line.warning-1 .stats-dot {
  background-color: #dc3545;
}

.stats-item-line.warning-2 .stats-dot {
  background-color: #fd7e14;
}

.stats-item-line.warning-3 .stats-dot {
  background-color: #ffc107;
}

.stats-item-line .stats-text {
  color: #333;
  font-weight: 500;
}

/* 保留原有的health-stats样式以防兼容问题 */
.health-stats {
  margin: 20px 0;
}

.stats-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stats-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
}

.stats-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.stats-item.good .stats-dot {
  background-color: #4caf50;
}

.stats-item.warning-1 .stats-dot {
  background-color: #dc3545;
}

.stats-item.warning-2 .stats-dot {
  background-color: #fd7e14;
}

.stats-item.warning-3 .stats-dot {
  background-color: #ffc107;
}

.stats-text {
  color: #333;
}

/* 心理健康整体情况布局 */
.health-overview {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

/* 躯体问题概览布局 */
.somatic-problems-overview {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.somatic-problems-overview .overview-left,
.somatic-problems-overview .overview-right {
  flex: 1;
}

.somatic-problems-overview .somatic-table {
  border-radius: 0 0 4px 4px;
  margin-top: 0;
}

.somatic-problems-overview .somatic-table .el-table__header-wrapper {
  display: none;
}

.somatic-problems-overview .somatic-table .el-table__body-wrapper {
  border-top: none;
}

/* 躯体问题说明样式 */
.somatic-description {
  margin: 20px 0 30px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #00b4f1;
}

.somatic-description .description-text {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 10px;
}

.somatic-description .description-note {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  font-style: italic;
}

/* 躯体问题图表样式 */
.somatic-chart-section {
  margin: 30px 0;
}

.somatic-chart-container,
.grade-chart-container {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 25px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.somatic-chart-container .chart-title,
.grade-chart-container .chart-title {
  background: linear-gradient(135deg, #00b4f1, #0099cc);
  color: white;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

.somatic-chart-container .chart-content,
.grade-chart-container .chart-content {
  background: white;
  padding: 20px;
}

/* 年级分布图表样式 */
.grade-chart-section {
  margin: 30px 0;
}

.grade-note {
  background: rgba(0, 180, 241, 0.1);
  padding: 10px 20px;
  font-size: 14px;
  color: #666;
  text-align: center;
  border-bottom: 1px solid #e6f7ff;
  margin: 0;
}

/* 心理健康程度描述报告样式 */
.somatization-description {
  margin: 20px 0;
  padding: 0;
}

.somatization-description .description-title {
  font-size: 16px;
  font-weight: bold;
  color: #00b4f1;
  margin-bottom: 15px;
}

.somatization-description .description-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.somatization-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.somatization-summary .summary-text {
  font-size: 14px;
  color: #333;
  margin-right: 10px;
}

.level-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  margin-right: 8px;
}

.level-tag.no-somatization {
  background-color: #4caf50;
}

.level-tag.mild-somatization {
  background-color: #ffc107;
  color: #333;
}

.level-tag.moderate-somatization {
  background-color: #ff9800;
}

.level-tag.severe-somatization {
  background-color: #f44336;
}

/* 躯体化症状分级表格 */
.somatization-levels {
  margin: 25px 0;
}

.somatization-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 13px;
}

.somatization-table th,
.somatization-table td {
  border: 1px solid #ddd;
  padding: 15px;
  text-align: left;
  vertical-align: top;
}

.somatization-table th {
  width: 25%;
  text-align: center;
  font-weight: bold;
  color: white;
  padding: 10px;
}

.somatization-table th.no-somatization {
  background-color: #4caf50;
}

.somatization-table th.mild-somatization {
  background-color: #ffc107;
  color: #333;
}

.somatization-table th.moderate-somatization {
  background-color: #ff9800;
}

.somatization-table th.severe-somatization {
  background-color: #f44336;
}

.somatization-table td.no-somatization {
  background-color: #e8f5e8;
}

.somatization-table td.mild-somatization {
  background-color: #fff8e1;
}

.somatization-table td.moderate-somatization {
  background-color: #fff3e0;
}

.somatization-table td.severe-somatization {
  background-color: #ffebee;
}

.level-cell {
  line-height: 1.6;
  color: #333;
  padding: 15px;
}

/* 响应式设计 */
@media screen and (max-width: 1200px) {
  .somatization-table {
    font-size: 12px;
  }
  
  .somatization-table th,
  .somatization-table td {
    padding: 10px;
  }
}

@media screen and (max-width: 768px) {
  .somatization-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .somatization-table th,
  .somatization-table td {
    min-width: 200px;
  }
}

/* 躯体化症状统计 */
.somatization-statistics {
  margin: 30px 0;
}

.statistics-title {
  font-size: 16px;
  font-weight: bold;
  color: #00b4f1;
  margin-bottom: 20px;
}

.statistics-chart {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 躯体化症状总结 */
.somatization-summary-section {
  margin: 30px 0;
  background: white;
  padding: 0;
  border-radius: 0;
  border: none;
}

.summary-title {
  font-size: 16px;
  font-weight: bold;
  color: #00b4f1;
  margin-bottom: 15px;
}

.summary-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.summary-content p {
  margin: 0;
}

.highlight-data {
  font-weight: bold;
}

.highlight-data.red {
  color: #dc3545;
}

.highlight-data.yellow {
  color: #ffc107;
}

.highlight-data.orange {
  color: #ff9800;
}

.highlight-data.blue {
  color: #007bff;
}

.highlight-data.mild {
  color: #ffc107;
}

.highlight-data.moderate {
  color: #ff9800;
}

.highlight-data.severe {
  color: #f44336;
}

.highlight-data.gender {
  color: #6c5ce7;
}

/* 问题分析说明样式 */
.problem-analysis-section {
  margin-top: 25px;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #00b4f1;
}

.problem-analysis-section .analysis-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.problem-analysis-section .analysis-text p {
  margin: 0 0 15px 0;
}

.problem-analysis-section .analysis-text p:last-child {
  margin-bottom: 0;
}

.problem-analysis-section .highlight-text {
  color: #00b4f1;
  font-weight: 600;
}

/* 躯体问题详细说明样式 */
.somatic-problems-description {
  margin-top: 25px;
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #00b4f1;
}

.somatic-problems-description .problem-summary,
.somatic-problems-description .problem-analysis,
.somatic-problems-description .intervention-suggestions {
  margin-bottom: 20px;
}

.somatic-problems-description .problem-summary:last-child,
.somatic-problems-description .problem-analysis:last-child,
.somatic-problems-description .intervention-suggestions:last-child {
  margin-bottom: 0;
}

.somatic-problems-description p {
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #2c3e50;
}

.somatic-problems-description .summary-content {
  line-height: 1.6;
  color: #555;
  font-weight: normal;
  text-align: justify;
}

.somatic-problems-description .analysis-list,
.somatic-problems-description .suggestions-list {
  margin: 10px 0 0 20px;
  padding: 0;
}

.somatic-problems-description .analysis-list li,
.somatic-problems-description .suggestions-list li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #555;
  list-style-type: disc;
}

.overview-left,
.overview-right {
  flex: 1;
}

.overview-title {
  background: linear-gradient(135deg, #00b4f1, #0099cc);
  color: white;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.overview-left .health-table {
  border-radius: 0 0 4px 4px;
  margin-top: 0;
}

.overview-left .health-table .el-table__header-wrapper {
  display: none;
}

.overview-left .health-table .el-table__body-wrapper {
  border-top: none;
}

.overview-right .chart-container {
  border: 1px solid #dcdfe6;
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin: 0;
  box-shadow: none;
  padding: 10px;
  position: relative;
  background: white;
}



/* 响应式设计 */
@media screen and (max-width: 768px) {
  .health-overview {
    flex-direction: column;
    gap: 15px;
  }
  
  .stats-list {
    gap: 8px;
  }
  
  .stats-item {
    font-size: 13px;
  }
  

}

/* 动态心理健康程度描述报告样式 */
.specific-problems {
  margin: 20px 0;
}

.problem-item {
  margin-bottom: 40px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #00b4f1;
}

.problem-item:last-child {
  margin-bottom: 0;
}

.problem-title {
  font-size: 18px;
  font-weight: bold;
  color: #00b4f1;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.problem-definition {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background: white;
  padding: 15px;
  border-radius: 4px;
  border-left: 3px solid #00b4f1;
}

.problem-levels {
  margin: 20px 0;
}

.level-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.level-table th,
.level-table td {
  padding: 12px 15px;
  text-align: center;
  border: 1px solid #e0e0e0;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.5;
}

.level-table th {
  font-weight: bold;
  color: white;
}

/* 等级表头样式 */
.level-header-normal {
  background-color: #4caf50;
}

.level-header-mild {
  background-color: #ffc107;
  color: #333;
}

.level-header-moderate {
  background-color: #ff9800;
}

.level-header-severe {
  background-color: #f44336;
}

.level-header-default {
  background-color: #6c757d;
}

/* 等级单元格样式 */
.level-cell-normal {
  background-color: rgba(76, 175, 80, 0.1);
  border-left: 3px solid #4caf50;
}

.level-cell-mild {
  background-color: rgba(255, 193, 7, 0.1);
  border-left: 3px solid #ffc107;
}

.level-cell-moderate {
  background-color: rgba(255, 152, 0, 0.1);
  border-left: 3px solid #ff9800;
}

.level-cell-severe {
  background-color: rgba(244, 67, 54, 0.1);
  border-left: 3px solid #f44336;
}

.level-cell-default {
  background-color: rgba(108, 117, 125, 0.1);
  border-left: 3px solid #6c757d;
}

.statistics-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
  padding: 10px;
  background: #00b4f1;
  color: white;
  border-radius: 4px;
}

.statistics-chart {
  background: white;
  border-radius: 4px;
  padding: 10px;
}

.summary-title {
  font-size: 16px;
  font-weight: bold;
  color: #00b4f1;
  margin: 20px 0 10px 0;
}

.summary-content {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  background: white;
  padding: 15px;
  border-radius: 4px;
  border-left: 3px solid #00b4f1;
}

.summary-content p {
  margin: 0;
}

.no-data {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 16px;
}

/* 建议部分样式 */
.suggestion-section {
  margin: 25px 0;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #00b4f1;
}

.suggestion-section:last-child {
  margin-bottom: 0;
}

.suggestion-header {
  font-size: 18px;
  font-weight: bold;
  color: #00b4f1;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #00b4f1;
  background: linear-gradient(90deg, rgba(0, 180, 241, 0.1) 0%, rgba(0, 180, 241, 0.05) 100%);
  padding: 10px 15px;
  border-radius: 4px;
}

.suggestion-content {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

.suggestion-content > p {
  margin-bottom: 15px;
  padding: 15px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #00b4f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.sub-section {
  margin: 20px 0;
  padding: 18px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e0e6ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sub-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 4px;
  display: inline-block;
  min-width: 200px;
  text-align: center;
}

.sub-section p {
  margin: 10px 0;
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #667eea;
  text-indent: 2em;
  text-align: justify;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .level-table {
    font-size: 12px;
  }
  
  .level-table th,
  .level-table td {
    padding: 8px 10px;
  }
  
  .problem-title {
    font-size: 16px;
  }
  
  .statistics-title {
    font-size: 14px;
  }
}

@media print {
  .report-bg {
    background: white;
    padding: 0;
  }

  .export-btn-container {
    display: none;
  }

  .report-container {
    box-shadow: none;
    max-width: 100%;
  }
}
</style>
